VUE生命周期

beforeCreate

• a. 不能获取数据，也不能获取真实DOM

• b. 它可以对new Vue()出来的时候，做初始化事件和生命周期做准备，这些都是内部完成的

• 总结： 这个钩子我们在项目中可以不用

created

• a. 初始化data选项

• 对data选项中的数据做数据劫持【 用es5 Object.defineProperty做getter和setter设置 】

• b 可以获取数据，但是不能获取真实DOM

• 可以对数据做计算、转换、修改等操作

• 总结： 数据请求，然后将请求的结果赋值给我们的数据

beforeMount

• 组件挂载前的准备工作

• a. 判断是否有el,如果el，那么我们在去判断是否有template,如果都有，通过render函数将jsx渲染为VDOM,这里我们就有了VDOM,如果没有el，那么我们可以使用$mount手动挂载，如果没有template选项，那么我们使用outerHTML手动写一个进去

• b. 可以获得数据，不能得到真实DOM

• 可以对数据做计算、转换、修改等操作

• 总结： 数据请求，然后将请求的结果赋值给我们的数据

• 这个钩子我们就让它做内部事务去吧，不去用它

mounted

• 表示组件挂载结束，也就是生成的html已经插入页面结束了

• a. 数据可以获取，真实dom也可以获取

• 我们可以操作真实DOM

• 可以对数据做计算、转换、修改等操作

• 总结：

• 项目中

• 数据请求 -> created/mounted

• DOM操作 -> mounted

生命周期更新阶段

• 触发条件： 数据改变

• 钩子函数一共有两个：

beforeUpdate

• 任务： 数据改变，重新生成vdom，然后通过diff算法得到patch补丁对象，自动完成任务

• 总结： 不操作

updated

• 更新结束，那么肯定已经获取真实DOM,也就是说我们可以做真实dom操作了

组件的销毁阶段

• 销毁阶段钩子函数的作用是： 自动删除事件以及监听

• 触发条件： 组件被销毁

• 外部销毁： 开关【 v-if 】

• 内部销毁； 调用 this.$destroy()

• 内部销毁组件会被删除，但是组件的真实dom外壳会被遗留

• 钩子函数有两个： 这两个钩子函数没有差别，任意用一个即可

beforeDestroy

destroyed

• 手动操作的作用： 善后

• 清除计时器、滚轮事件