Vue生命周期

Vue 生命周期

1. beforeCreate
2. created
3. beforeMount
4. mounted
5. beforeUpdate
6. updated
7. beforeDestroy
8. destroyed

先看一波代码

  
    
    
    
  
  
    

      
{{ message }}
    
  
  

分析运行结果

Vue挂载时生命周期

1. 在 beforeCreate 和 created 钩子函数之间的生命周期

   • 在这个生命周期之间，进行初始化事件，进行数据的观测，可以看到在 created 的时候数据已经和 data 属性进行绑定（放在 data 中的属性当值发生改变的同时，视图也会改变）。
   • 注意看下：此时还是没有 el 选项

2. created 钩子函数和 beforeMount 间的生命周期

   • 在这个阶段发生的事情挺多, 首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有 el 选项，则停止编译，也就意味着停止了生命周期，直到在该 vue 实例上调用 vm.$mount(el)。此时注释掉代码中:

     // 将上述代码中的下一行注释掉
     // el: '#app',
     

   • 此时运行结果如下所示, 到 created 的时候就停止了

     
     
     

     无el选项的时候生命周期

   • 在控制台中输入

     vm.$mount(document.getElementById('app'));
     

     发现继续往下运行, 结果如下

     
     
     

   • 我们往下看，template 参数选项的有无对生命周期的影响。

     • 如果 vue 实例对象中有 template 参数选项，则将其作为模板编译成 render 函数。

     • 如果没有 template 选项，则将外部 HTML 作为模板编译。

     • 可以看到 template 中的模板优先级要高于 outer HTML 的优先级。
       修改代码如下, 在 HTML 结构中增加了一串 html，在 vue 对象中增加了 template 选项：

       
         
       外部HTML中内容{{message}}
       
       
       

     • 执行后的结果可以看到在页面中显示的是 template 中的内容

       
       
       

       template 配置项的使用

       这也是为什么对于el的判断要在 template 之前了~是因为 vue 需要通过 el 配置项 找到对应的 outerHTML 使用 template 里面的内容来进行替换。

     • 在 vue 对象中还有一个 render 函数，它是以 createElement 作为参数，然后做渲染操作，而且我们可以直接嵌入 JSX. 嵌入 JSX 应该要引入 babel-plugin-transform-vue-jsx 这个插件或者其他 babel 转义 jsx 的插件

       new Vue({
         el: '#app',
         template: '
       template {{message}}
       ',
         render: function(createElement) {
           return createElement('h1', 'createElement Function');
         },
       });
       

   • 所以综合排名优先级：render 函数选项 > template 选项 > outer HTML.

3. beforeMount 和 mounted 钩子函数间的生命周期

   • 通过上述图片, 可以看到 beforeMount 时的 el, 还是之前 dom 中没有被替换数据之间的原始模板, 在 mounted 之前 h1 中还是通过{{message}}进行占位的，因为此时还有挂在到页面上，还是 js 中的虚拟 DOM 形式存在的。在 mounted 之后可以看到 h1 中的内容发生了变化。

4. beforeUpdate 和 updated 测试

   • 当 vue 发现 data 中的数据发生了改变，会触发对应组件的重新渲染，先后调用 beforeUpdate 和 updated 钩子函数。

   • 在控制台中输入

     vm.message = '触发组件更新';
     

   

   组件更新测试

   通过对 el 内容的对比, 可以发现变化前后的 dom 变化, 对于数据message的变化, 我们可以通过$watch 来进行监控

5. beforeDestroy 和 destroyed 钩子函数间的生命周期

   • beforeDestroy 钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
   • destroyed 钩子函数在 Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。