Vue生命周期

Vue生命周期

生命周期的应用场景和函数式组件

• 创建阶段
  
  • beforeCreate : 初始化事件和生命周期 数据观测、属性、侦听器配置等
  • create : 模板编译到render
  • beforeMount ====== > render
  • mounted : 异步请求、操作DOM、定时器等
• 更新阶段
  • beforeUpdate : 依赖数据改变或 $forceUpdate 强制更新 移除已经添加的事件监听器等 万万不可更改依赖数据
  • beforeUpdate ======》 render
  • update : 操作 DOM 添加事件监听器等 万万不可更改依赖数据
  • 为什么不能在 beforeUpdate 和 update 中更改依赖数据
    • 因为在此阶段更新依赖数据，会一直触发 这俩个钩子函数，导致死循环
• 销毁阶段
  • beforeDestory ： 移除已经添加的事件监听器、计时器等(不清除定时器的化会产生内存泄漏)
  • destroyed
• 函数式组件
  • functional(功能性) : true
  • 无状态、无实例、没有this 上下文、无生命周期
    

vue生命周期总共有几个阶段？

答：总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后

• beforeCreate（创建前） ： Vue 实例的挂载元素 $el 和 数据对象data都为undefined，还未初始化。
• created（创建后） ：完成数据观测，属性和方法的运算，初始化事件， $el 还没有
• beforeMount（载入前） ：Vue 实例的 $el 和 data 都初始化了，但还是挂载之前为虚拟的 dom节点， data.message 还未替换。
• mounted（载入后） : Vue 实例挂载完成，data.message 成功渲染。
• beforeUpdate（更新前） ：当 data 发生变化时， 在DOM重新渲染之前调用。 updated（更新后） ：在 DOM 重新渲染之后调用。
• beforeDestroy（销毁前） ：在 Vue 实例销毁之前调用。实例仍然完全可用。
• destroyed（销毁后） ：在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被 销毁。

生命周期钩子 组件状态 最佳实践
beforeCreate 实例初始化之后，this指向创建的实例，不能访问到data、computed、watch、methods上的方法和数据 常用于初始化非响应式变量
created 实例创建完成，可访问data、computed、watch、methods上的方法和数据，未挂载到DOM，不能访问到$el属性，$ref属性内容为空数组 常用于简单的ajax请求，页面的初始化
beforeMount 在挂载开始之前被调用，beforeMount之前，会找到对应的template，并编译成render函数 -
mounted 实例挂载到DOM上，此时可以通过DOM API获取到DOM节点，$ref属性可以访问 常用于获取VNode信息和操作，ajax请求
beforeupdate 响应式数据更新时调用，发生在虚拟DOM打补丁之前 适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器
updated 虚拟 DOM 重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作 避免在这个钩子函数中操作数据，可能陷入死循环
beforeDestroy 实例销毁之前调用。这一步，实例仍然完全可用，this仍能获取到实例 常用于销毁定时器、解绑全局事件、销毁插件对象等操作
destroyed 实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁 -

注意：

created阶段的ajax请求与mounted请求的区别：前者页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态
mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTickvue2.0之后主动调用$destroy()不会移除dom节点，作者不推荐直接destroy这种做法，如果实在需要这样用可以在这个生命周期钩子中手动移除dom节点