Vue生命周期函数.个人笔记

168 阅读1分钟

生命周期函数就是vue实例在 某一个时间点自动执行 的函数

新建一个vue实例的过程

1.初始化事件和生命周期

自动执行beforeCreate生命周期函数

2.处理外部注入和双向绑定

自动执行created生命周期函数

初始化结束


3.判断 是否有el属性

if:有:直接用模版去渲染

有el属性 | 继续判断是否有template属性

else:无:会把el外层的html当成模版


模版和数据相结合即将渲染到页面的前一瞬间

渲染前执行baforeMount生命周期函数

4.模版结合数据生成dom元素挂载到页面之上

自动执行mounted生命周期函数(执行时页面已被渲染完毕)


数据发生改变的时候 也有两个生命周期函数:

数据发生改变之前

自动执行beforeUpdate生命周期函数

数据发生改变并重新渲染之后

自动执行updated生命周期函数


销毁实例操作:

当我们执行 $destroy 销毁vue实例的时候

自动执行beforeDestroy生命周期函数

当组件(vue实例)被完全销毁之后

自动执行destroyed生命周期函数