vue 的生命周期

参考文章

https://blog.csdn.net/weixin_39820136/article/details/111135835

https://blog.csdn.net/m0_57138227/article/details/120833797

https://blog.csdn.net/weixin_45791692/article/details/124045505

生命周期的钩子函数

• 在整个生命周期中，主动执行的函数

生命周期

• vue项目是通过组件化进行实现的，一个页面有若干个组件构成，形成一个组件树
• 每个组件都由一个vue实例来管理
• 通过new Vue这个构造函数创建实例
• 实例化后，会初始化生命周期（主要就是初始化一些属性），会初始化事件（主要就是初始化父元素给子节点绑定的一些事件），会初始化渲染函数
• beforeCreate 钩子函数执行，这时，不要去修改data数据，因为data和dom元素el都没有被创建
• 实例创建完成，初始化数据完成
• created钩子函数执行，这时，可以去访问data，computed，watch，methods，不能访问el因为还没有被创建
• el已经创建但是是虚拟dom，数据还没有挂载到模版中
• beforeMount钩子函数执行，这时，dom元素已经创建，但数据还没有应用到dom元素上
• 完成vm创建，完成el和数据的双向绑定，完成dom挂载和渲染
• mounted 钩子函数执行，这时，可以对dom进行操作
• 界面层的数据（数据在界面已经挂载的）发生改变，beforeUpdate钩子函数执行
• 虚拟dom重新渲染
• updated钩子函数执行，这时，不要操作任何数据，否则会陷入死循环
• 数据已经改变，界面的内容也同步更新完成
• beforeDestroy钩子函数执行
• 事件监听会被移除，子实例被被销毁，解除了dom绑定
• destroyed钩子函数执行，这时，dom结构还是在的