Vue生命周期

Vue 生命周期

三个阶段：初始化阶段、更新阶段、销毁阶段

1. 初始化生命周期（有四个钩子）
   1. beforeCreate
      1. 不能获取数据（data），也不能真实dom
      2. 它可以对new Vue()出来的时候，做初始化事件和生命周期做准备
      3. 总结：这个钩子可以在项目中不用
   2. created
      1. 初始化data选项
         • 对data选项中的数据做数据劫持
      2. 可以获取数据，不能获取真实dom
         • 可以对数据进行操作
      3. 总结：可以做数据请求，然后将请求的结果赋值给data数据
   3. beforeMount
      1. 组件挂载前的准备工作
         • 判断是否有el，如果有el，那么再去判断是否有template，如果有，通过render函数将jsx渲染为VDOM，如果没有el，那么我们可以使用$mount手动挂载，如果没有template选项，那我们使用outerHTML手动写一个进去
         • 可以获得数据，不能获得真实dom
           • 可以对数据进行操作
         • 总结：可以做数据请求，然后将请求的结果赋值给data数据
         • 这个钩子可以不用
   4. mounted
      • 表示组件挂载结束，也就是生成HTML已经插入页面结束了
      • 数据可以获取，真实dom可以获取
        • 我们可以操作真实dom
        • 可以对数据进行操作
      • 总结：可以做数据请求，可以操作真实dom
        共同特点：
        a. 组件一旦创建自动执行
        b. 执行一次
   • 项目中用到的：
     1. 数据请求 --> created/mounted
     2. DOM操作–> mounted
2. 更新阶段(两个钩子)
   不是自动执行的
   触发条件：数据改变
   1. beforeUpdate
      • 数据改变，重新生成vdom，然后通过diff算法得到patch补丁对象，自动成任务
      • 总结：不操作
   2. updated
      • 更新结束，获得真实dom，可以进行dom操作
      • 总结：操作dom，在这个阶段使用updated
3. 销毁阶段(两个)
   1. beforeDestroy
   2. destroyed
      1. 这两个钩子没啥差别：任意用一个
      2. 销毁阶段钩子函数的作用是：自动删除事件以及监听
      3. 触发条件：组件被销毁
         • 外部销毁：开关【v-if】
         • 内部销毁：要调用$this.destroy()
           • 组件会被销毁，但是组件的真实dom外壳会被遗留（自己在后动消除）
      4. 手动操作：善后
         1. 清除计时器、滚轮操作