生命周期
开始创建、初始化数据、编译模板、挂载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了