Vue生命周期

Posted 2021-12-29 剑雪封喉r

Vue生命周期 共8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

一、创建前/后：
① beforeCreate阶段，实例的挂载元素el和数据对象data都为undefined，未初始化。
② created阶段， vue 实例的数据对象data有了，el为undefined，未初始化。
二、载入前/后：
③ beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节
点，data.message还未替换。
④ mounted阶段，vue实例挂载完成，data渲染成功。
三、更新前/后：当data变化时，会触发
⑤ beforeUpdate和⑥ updated方法
四、销毁前/后：
⑦ beforeDestroy 销毁前
⑧ destroy 销毁执行后，对data的改变不会再触发周期函数，此时vue实例已经解除了事件监
听以及和dom的绑定，但是dom结构依然存在
常用
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一
些需要的操作。

methods 是Vue实例对象上绑定的方法，供当前Vue组件作用域内使用，未调用不会执行，
只执行逻辑，返回值可有可无。

computed 是计算属性，也可以理解为一个方法。其中计算的结果如果不发生改变就不会触
发，且必须返回一个值并在DOM中绑定的才能取得值。他可以自动获取数据的改变。

watch 属性是手动定义的所需监听的值，不同的数据可以在其中多次定义监听值，这会消耗
一定性能，并不能像computed那样返回缓存。