Vue生命周期解析

古城微笑少年丶 2022-09-30 12:57 195阅读 0赞

**Vue的生命周期包括：**

beforeCreate：实例刚刚创建，数据检测和事件初始化都未开始  
    created：数据检测和事件初始化完毕，还未开始编译模板  
    beforeMount：模板编译完成，有一个虚拟DOM节点  
    mounted：替换或者插入DOM,形成真实的DOM节点  
    beforeUpdate：数据改变，但视图还没更新  
    updated：视图更新完成  
    beforeDestroy：watchers、组件和事件监听器销毁之前  
    destroyed：销毁完成

**再来一张Vue 的生命周期图：**

![Center][]

**示例代码演示：**

<div id="app">{
       {a}}</div>
    
    var myVue = new Vue({
        el: "#app",
        data: {
        	a: "HelloWord"
        },
        beforeCreate: function() {
        	console.log("创建前")
    	console.log(this.a) //undefined
    	console.log(this.$el) //undefined
        },
        created: function() {
    	console.log("创建之后");
    	console.log(this.a) //HelloWord
    	console.log(this.$el) //undefined
        },
        beforeMount: function() {
    	console.log("mount之前")
    	console.log(this.a) //HelloWord
    	console.log(this.$el) //<div id="app">{
       {a}}</div>
        },
        mounted: function() {
    	console.log("mount之后")
    	console.log(this.a) //HelloWord
    	console.log(this.$el) //<div id="app">HelloWord</div>
        },
        beforeUpdate: function() {
    	alert("更新前");
    	console.log(this.a) //Welcome to Vue,页面上显示的还是老的数据
        },
        updated: function() {
    	console.log("更新完成");
    	console.log(this.a) //Welcome to Vue，页面上更新为新数据
        },
        beforeDestroy: function() {
    	console.log("销毁前");
    	console.log(this.a) //Welcome to Vue
    	console.log(this.$el) //<div id="app">Welcome to Vue</div>
        },
        destroyed: function() { 
    	console.log("已销毁");
    	console.log(this.a) //Welcome to Vue
    	console.log(this.$el) //<div id="app">Welcome to Vue</div>
        }
    });
    setTimeout(function(){
    	myVue.a = "Welcome to Vue";
    },500)
    setTimeout(function(){
    	myVue.$destroy();
    },1000)
    setTimeout(function(){
    	alert("再次改变 a 的值")
    	myVue.a = "HelloWord";
    },1500)

**注意点：**

**1、beforeMount实例化之前 data是a的值：HelloWord、DOM节点是虚拟的，就是先占了个坑（即<div id="app">\{ \{a\}\}</div> ）**

**2、$destroy这个方法销毁的是监听器，而不是视图，也就是说之后视图不再受vue控制**

[Center]: /images/20220705/fad299c7b1904e41a374ab417aecc455.png