Vue生命周期

生命周期

生命周期：

也叫生命周期回调函数、生命周期函数、生命周期钩子是vue在关键时刻给我们调用的一些特殊的名称函数生命周期函数的名字不可以更改，但函数具体内容是我们自己按照需求编写生命周期函数的this指向的是vm或组件实例对象

常用的生命周期钩子

1、mounted：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化 *** 作2、beforeDestroy：关闭定时器、取消订阅消息、解绑自定义事件等收尾工作

关于销毁vue实例

销毁后借助vue开发者工具看不到任何信息销毁后自定义事件会失效，原生Dom事件依然有效一般不会再beforeDestroy *** 作数据

先看一下vue给我们提供的图

​ 为了方便生命周期的演示，在这里写一个基础的样例，演示到哪个阶段代码依次添加即可。以下生命周期均和methods同级关系

    
        N的值是{{n}}
        n+1
    
    

1、创建 1.1、beforeCreate() beforeCreate() 在此阶段无法通过VM访问到data中的数据和methods中的方法

//无法通过VM访问到data中的数据和methods中的方法
beforeCreate(){
                console.log('beforeCreate');
                console.log(this);
                debugger;
}

1.2、created() created（） 可以通过vm访问到data中的数据和methods中的方法

            //可以通过vm访问到data中的数据和methods中的方法
            created(){
                console.log('created');
                console.log(this);
                debugger;
            }

2、挂载 2.1、beforeMount() beforeMount() 页面呈现的是未经Vue编译的Dom结构所有对Dom的 *** 作均不奏效

beforeMount(){
        console.log('beforeMount');
        console.log(this);
        debugger;
}

​ 看页面结构

​ 然后我们 *** 作一下Dom

​

​ 一旦我们结束了debug，我们可以看一下变化。

​ 产生这个是原因是因为Vue把内存中的虚拟Dom变成了真实Dom。

2.2、mounted() mounted() 页面中呈现的是经过Vue编译的Dom对Dom的 *** 作均有效（尽可能避免），至此初始化过程结束。一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件等初始化 *** 作

            mounted(){
                console.log('mounted');
                console.log(this);
				//document.querySelector('h1').innerText='hah'
                debugger
            }

​ 这里如果 *** 作dom元素，页面会直接变化

3、更新 3.1、beforeUpdate() beforeUpdate() 当数据被改变时，被触发此时：数据是新的，但页面是旧的。即页面尚未和数据保持同步

beforeUpdate(){
       console.log('beforeUpdate');
       console.log(this.n);
       debugger
}

3.2、updated() updated() 当数据被改变时，被触发此时：数据是新的，但页面是新的。即页面和数据保持同步

updated(){
      console.log('updated');
      console.log(this.n);
      debugger
}

4、销毁 4.1、beforeDestroy()和destroyed() 当vm.$destroy()被调用时beforeDestroy() vm所有的data、methods、指令等等，都处于可用状态、马上执行销毁过程。一般在此阶段：关闭定时器、取消订阅消息、解绑自定义事件等收尾工作 destroyed()

  
        N的值是{{n}}
        n+1
        点我销毁VUE
    
    

​ 当我触发点击事件销毁vue，会出现以下结果

​