Vue实例的生命周期

Vue 实例的生命周期

• 生命周期钩子 = 生命周期函数 = 生命周期事件

• 生命周期函数分类

  • 创建期间的生命周期函数
  • 运行期间的生命周期函数
  • 销毁期间的生命周期函数

创建期间的生命周期

• new Vue()

  • var vm = new Vue({})
  • 表示开始创建一个 Vue 的实例对象

• Init Events & Lifecycle

  • 表示，刚初始化一个 Vue 空的实例对象，这时候，这个对象身上，只有默认的一些生命周期函数和默认的事件，其他的东西都未创建
  • 注意：在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的数据都还没有初始化

• beforeCreate 函数

  • 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
  • 注意：在 beforeCreate 生命周期执行的时候，date 和 methods 中的数据都还没有被初始化

  beforeCreate() { // 这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它
                // console.log(this.msg);
                // this.show();
  
                // 注意：在 beforeCreate 生命周期执行的时候，date 和 methods 中的数据都还没有被初始化
            },
  

• Init injections & reactivity

• created 函数

  • 这是遇到的第二个生命周期函数
  • 在 created 中，data 和 methods 都已经被初始化好了
  • 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作

  created() { // 这是遇到的第二个生命周期函数
                // console.log(this.msg);
                // this.show();
  
                // 在 created 中，data 和 methods 都已经被初始化好了
                // 如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
            },
  

• Has “el” option ?

  • 这里表示 Vue 开始编辑模板
  • 把 Vue 代码中的那些指令进行执行，最终，
  • 在内存中生成一个编译好的最终模板字符串
  • 然后，把这个模板字符串渲染为内存中的 DOM
  • 此时，只是在内存中，渲染好了模板，并没有把模板挂载到真正的页面中去

• beforeMount 函数

  • 这是遇到的第三个生命周期函数，表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
  • 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
  • 此函数执行的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时，页面还是旧的

• Create vm.$el and replace “el” with it

  • 这一步，将内存中编译好的模板，真实的替换到浏览器的页面中去

• mounted 函数

  • 这是需要的第四个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
  • 注意：mounted 是实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例，就静静的躺在我们的内存中，一动不动
  • 如果要通过某些插件操作页面上的 DOM 节点了，最早要在 mounted 中进行
  • 只要执行完了 mounted ，就表示整个 Vue 实例已经初始化完毕了；此时，组件已经脱离了创建阶段，进入到了运行阶段

运行期间的生命周期

• 组件运行阶段的生命周期函数只有两个：
  • beforeUpdate 和 updated
  • 这俩事件，会根据 data 数据的改变，有选择性的触发 0 次到多次

• beforeUpdate 函数

  • 这时候表示我们的界面还没有被更新 【数据被更新了吗？ 数据肯定被更新了】
  • 得出结论：当执行 beforeUpdate 的时候，页面中显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和最新的数据保持同步

• Virtual DOM re-render and patch

  • 这一步执行的是：先根据 data 中最新的数据，在内存中，重新渲染出一份最新的内存 DOM 数，
  • 当最新的内存 DOM 树被更新之后，会把最新的 DOM 树，重新的渲染到真实的页面中去，这时候，就完成了数据从 data(Model 层) -> view(视图层) 的更新

• updated 函数

  • updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的

销毁期间的生命周期

• beforeDestroy 函数

  • 当执行 beforeDestroy 钩子函数的时候，Vue 实例就已经从运行阶段，进入到了销毁阶段
  • 当执行 beforeDestroy 的时候，实例身上所有的 data 和所有的 methods ，以及过滤器、指令… 都处于可用状态，此时，还没有真正执行销毁过程

• destroyed 函数

  • 当执行到 destroyed 函数的时候，组件已经被完全销毁了，此时，组件中所有的数据、方法、指令、过滤器… 都已经不可用了