Vue生命周期

Vue 生命周期

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

先看一波代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>vue生命周期学习</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        message: 'Vue的生命周期',
      },
      beforeCreate: function() {
        console.group('------beforeCreate创建前状态------');
        console.log('%c%s', 'color:red', 'el     : ' + this.$el); //undefined
        console.log('%c%s', 'color:red', 'data   : ' + this.$data); //undefined
        console.log('%c%s', 'color:red', 'message: ' + this.message); //undefined
      },
      created: function() {
        console.group('------created创建完毕状态------');
        console.log('%c%s', 'color:red', 'el     : ' + this.$el); // undefined
        // 这里使用 es6 的扩展预算符, 重新建立一个变量, 防止chrome控制台因为引用关系, 而打印错误`引用`的后期变动数据
        console.log('%c%s', 'color:red', 'data   : ', { ...this.$data }); // 已经初始化 {message: "Vue的生命周期"}
        console.log('%c%s', 'color:red', 'message: ' + this.message); // 已经初始化 'Vue的生命周'
      },
      beforeMount: function() {
        console.group('------beforeMount挂载前状态------');
        console.log('%c%s', 'color:red', 'el     : ', this.$el); // 已被初始化  div#app>h1{{{message}}}
        console.log('%c%s', 'color:red', 'data   : ', { ...this.$data }); // 已经初始化  {message: "Vue的生命周期"}
        console.log('%c%s', 'color:red', 'message: ' + this.message); // 'Vue的生命周期'
      },
      mounted: function() {
        console.group('------mounted 挂载结束状态------');
        console.log('%c%s', 'color:red', 'el     : ', this.$el); //已被初始化 div>h2{Vue的生命周期}
        console.log('%c%s', 'color:red', 'data   : ' + { ...this.$data }); // 已被初始化
        console.log('%c%s', 'color:red', 'message: ' + this.message); // Vue的生命周期
      },
      beforeUpdate: function() {
        console.group('beforeUpdate 更新前状态===============》');
        console.log('%c%s', 'color:red', 'el     : ' + this.$el.innerHTML);
        console.log(this.$el);
        console.log('%c%s', 'color:red', 'data   : ' + this.$data);
        console.log('%c%s', 'color:red', 'message: ' + this.message);
      },
      updated: function() {
        console.group('updated 更新完成状态===============》');
        console.log('%c%s', 'color:red', 'el     : ' + this.$el.innerHTML);
        console.log(this.$el);
        console.log('%c%s', 'color:red', 'data   : ' + this.$data);
        console.log('%c%s', 'color:red', 'message: ' + this.message);
      },
      beforeDestroy: function() {
        console.group('beforeDestroy 销毁前状态===============》');
        console.log('%c%s', 'color:red', 'el     : ' + this.$el);
        console.log(this.$el);
        console.log('%c%s', 'color:red', 'data   : ' + this.$data);
        console.log('%c%s', 'color:red', 'message: ' + this.message);
      },
      destroyed: function() {
        console.group('destroyed 销毁完成状态===============》');
        console.log('%c%s', 'color:red', 'el     : ' + this.$el);
        console.log(this.$el);
        console.log('%c%s', 'color:red', 'data   : ' + this.$data);
        console.log('%c%s', 'color:red', 'message: ' + this.message);
      },
    });
  </script>
</html>

分析运行结果

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 选项:

        <div id="app">
          <h1>外部HTML中内容{{message}}</h1>
        </div>
        <script>
          var vm = new Vue({
            el: '#app',
            //在vue配置项中添加下面内容
            template: "<h1>内部template HTML中内容 {{message}}</h1>",
            data: {
              message: 'Vue的生命周期'
            }
        </script>
        
      • 执行后的结果可以看到在页面中显示的是 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: '<h2>template {{message}}</h2>',
          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 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

推荐阅读更多精彩内容

  • vue生命周期 每个Vue实例或组件从创建到显示再到废弃的过程就是vue的生命周期。很多时候我们希望能在这个过程中...
    大_坤阅读 5,832评论 0 6
  • 每个Vue实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到DOM并在...
    李红欧巴阅读 693评论 0 4
  • 首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方...
    廊桥梦醉阅读 1,800评论 0 47
  • 涉及到钩子函数有:1)beforeCreate;2)created;3)beforeMount;4)mounted...
    puxiaotaoc阅读 2,652评论 0 7
  • 首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方...
    shougg22阅读 10,841评论 0 9