vue生命周期小记

最新推荐文章于 2024-05-15 22:49:15 发布

webnoob

最新推荐文章于 2024-05-15 22:49:15 发布

阅读量261

点赞数

分类专栏： VueJS JS/Node

本文链接：https://blog.csdn.net/Szu_AKer/article/details/84207602

版权

JS/Node 同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

VueJS

2 篇文章 0 订阅

订阅专栏

在这里插入图片描述

1.beforeCreate 和 created

这两个钩子函数用在vue组件创建时开始调用，处在vue分配数据节点前后，如下测试代码：

<body>
    <div id="app"></div>

    <script src="dist/vue.js"></script>
    <script>
        var MyComponent = {
            template: `
                <div>
                    <p>{{ message }}</p>    
                </div>
            `,
            data: function() {
                return {
                    message: 'Hello Vue'
                }
            },
            beforeCreate: function() {
                console.log(this.message);
            },
            created: function() {
                console.log(this.message);
            }
        }

        var vm = new Vue({
            el: '#app',
            components: {
                'my-component': MyComponent
            },
            template: '<my-component/>'
        });
    </script>
</body>

输出结果：
在这里插入图片描述

在 beforeCreate 时候vue还没分配数据，所以取不到插件data里面的值
在 created 时vue已经结束数据配置，实例化了vue对象
应用：created 一般用来ajax请求后台数据，初始化插件数据

2. beforeMount 和 mounted

在两个钩子函数在vue挂在到dom时节点的前后触发

{
	beforeMount: function() {
	    console.log(document.getElementsByTagName('div')[0]);
	},
	mounted: function() {
	    console.log(document.getElementsByTagName('div')[0]);
	}
}

输出结果：
在这里插入图片描述

beforeMount 主要是获取vue挂载前的原dom
mounted 是主要获取vue挂载后的dom，这两个函数都是值触发一次

3. beforeUpdate 和 updated

这两个钩子函数发生在修改vue组件data数据渲染dom视图的节点前后，如下代码：

{
   beforeUpdate: function() {
       console.log('修改数据之前的dom');
       console.log(document.body.children[0].outerHTML);
   },
   updated: function() {
       console.log('修改数据之后的dom');
       console.log(document.body.children[0].outerHTML);
   }
}

输出结果：
在这里插入图片描述

beforeUpdate 主要是获取修改数据后vue重新渲染视图前的dom数据，而 update 刚好相发

4. beforeDestroy 和 destroyed

这两个钩子函数发生在组件销毁节点的前后，如下代码

  <script>
      var MyComponent = {
          template: `
              <div>
                  <p>{{ message }}</p>  
              </div>
          `,
          data: function() {
              return {
                  message: 'Hello Vue'
              }
          },
          beforeCreate: function() {
              console.log(this.message);
          },
          created: function() {
              console.log(this.message);
          },
          beforeDestroy: function() {
              console.log('beforeDestory');
          },
          destroyed: function() {
              console.log('destoryed');
          }
      }

      var vm = new Vue({
          el: '#app',
          components: {
              'my-component': MyComponent
          },
          template: '<my-component v-if="isExsit"></my-component>',
          data: function() {
              return {
                  isExsit: true
              }
          }
      });
  </script>

输入如下:
在这里插入图片描述

beforeDestroy主要是拿到组件销毁前的数据，进行本地缓存等操作
destroyed一般是销毁事件，释放内存等操作

5. deactivated 和 activated

一般我们不会去频繁的创建和销毁组件，用的比较多得是去启用和停用组件。所以这两个钩子分别用在停用和启用组件后触发。v-if 为了不让组件销毁，要把组件包裹在vue的内置组件 keep-alive 里面，如下测试代码：

 <script>
      var MyComponent = {
          template: `
              <div>
                  <p>{{ message }}</p>  
              </div>
          `,
          data: function() {
              return {
                  message: 'Hello Vue'
              }
          },
          beforeCreate: function() {
              console.log(this.message);
          },
          created: function() {
              console.log(this.message);
          },
          beforeDestroy: function() {
              console.log('beforeDestory');
          },
          destroyed: function() {
              console.log('destoryed');
          },
          deactivated: function() {
              console.log('组件被停用');
          },
          activated: function() {
              console.log('组件被激活');
          }
      }

      var vm = new Vue({
          el: '#app',
          components: {
              'my-component': MyComponent
          },
          template: `
          <keep-alive>
              <my-component v-if="isExsit"></my-component>
          </keep-alive>    
          `,
          data: function() {
              return {
                  isExsit: true
              }
          }
      });
  </script>