vue-生命周期整理

生命周期

开始创建、初始化数据、编译模板、挂载 Dom、渲染 → 更新 → 渲染、激活、移除、销毁

el 优先级

• render 函数选项 > template 参数 > 外部 HTML

过程

• new Vue() 初始化实例
• beforeCreate() (数据/计算属性/方法 未初始化, Dom 未挂载)
• 初始化 数据/计算属性/方法
• created() (数据/计算属性/方法 已初始化, Dom 未挂载)
• 查找对应的模板，编译模板为虚拟 Dom
• beforeMounted() (数据/计算属性/方法 已初始化, Dom 未挂载)
• 挂载 Dom
• mounted() (数据/计算属性/方法 已初始化, Dom 已挂载)

更新

• 首先触发 watch
• 再触发 beforeUpdate()
• 再触发 updated()
• beforeUpdate(), updated()中不能更改数据，否则会陷入死循环

激活

• activated() -> for keep-alive，组件被激活时调用
• deactivated() -> for keep-alive，组件被移除时调用

销毁

• $destroy 方法被调用的时候就会执行 beforeDestroy() destroyed()
• 一般 beforeDestroy()善后, destroyed()也可以:清除计时器、清除非指令绑定的事件等等
• 数据和方法还存在,但无法操作 Dom 了