vue.js生命周期的理解

最新推荐文章于 2024-05-28 10:15:00 发布

♂♀放纸鸢

最新推荐文章于 2024-05-28 10:15:00 发布

阅读量215

点赞数 2

本文链接：https://blog.csdn.net/qq407949480/article/details/84760176

版权

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。(初始化、更新、销毁)

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

首先先看看官网的图，详细的给出了vue的生命周期:

生命周期函数/钩子相对应的用法

beforeCreate	在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created	在实例创建完成后被调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，`$el` 属性目前不可见。
beforeMount	在挂载开始之前被调用
mounted	挂载到实例上去之后调用该钩子
beforeUpdate	$el对象已经修改，但是页面上dom的数据还没有发生改变时调用
updated	$el对象已经修改，也更新到dom上面，完成更新
beforeDestroy	组件销毁前调用
destoryed	组件销毁后调用
activated	keep-alive 组件激活时调用
deactivated	keep-alive 组件停用时调用

用法例子(直接复制出去执行，然后就可以看到各钩子函数应该怎么执行)：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="name" content="content">
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
var app = new Vue({
  el: '#app',
  data: {
    message : "hello vue" 
  },
  beforeCreate: function () {
    console.group('beforeCreate 创建前状态===============》');
    console.log("el     : " + this.$el); //undefined
    console.log("data   : " + this.$data); //undefined 
    console.log("message: " + this.message)  //undefined 
  },
  created: function () {
    console.group('created 创建完毕状态===============》');
    console.log("el     : " + this.$el); //undefined
    console.log("data   : " + this.$data); //已被初始化 
    console.log("message: " + this.message); //已被初始化
  },
  beforeMount: function () {
    console.group('beforeMount 挂载前状态===============》');
    console.log("el     : " + (this.$el)); //已被初始化
    console.log("el中html内容 : " + this.$el.innerHTML);
    console.log(this.$el);                 //<div id="app">……</div>
    console.log("data   : " + this.$data); //已被初始化  
    console.log("message: " + this.message); //已被初始化  
  },
  mounted: function () {
    console.group('mounted 挂载结束状态===============》');
    console.log("el     : " + this.$el); //已被初始化
    console.log("el中html内容: " + this.$el.innerHTML);
    console.log(this.$el);                //<div id="app">……</div>
    console.log("data   : " + this.$data); //已被初始化
    console.log("message: " + this.message); //已被初始化 
  },
  beforeUpdate: function () {
    console.group('beforeUpdate 更新前状态===============》');
    console.log("el     : " + this.$el);
    console.log("el中html内容: " + this.$el.innerHTML);
    console.log(this.$el);   
    console.log("data   : " + this.$data); 
    console.log("message: " + this.message); 
  },
  updated: function () {
    console.group('updated 更新完成状态===============》');
    console.log("el     : " + this.$el);
    console.log("el中html内容: " + this.$el.innerHTML);
    console.log(this.$el); 
    console.log("data   : " + this.$data); 
    console.log("message: " + this.message); 
  },
  beforeDestroy: function () {
    console.group('beforeDestroy 销毁前状态===============》');
    console.log("el     : " + this.$el);
    console.log("el中html内容: " + this.$el.innerHTML);
    console.log(this.$el);    
    console.log("data   : " + this.$data); 
    console.log("message: " + this.message); 
  },
  destroyed: function () {
    console.group('destroyed 销毁完成状态===============》');
    console.log("el     : " + this.$el);
    console.log("el中html内容: " + this.$el.innerHTML);
    console.log(this.$el);  
    console.log("data   : " + this.$data); 
    console.log("message: " + this.message)
  }
})
</script>
</body>
</html>

打开chrome浏览器运行上面，F12打开console面板发现，最初只有4个钩子函数beforeCreate、created、beforeMount、mounted，如下图

beforeUpdate,Updated在改变data中的数据会被调用，我咱console中输入app.message="hello lifecycle",如下图

（注意 this.$el 是一个对象，相当于一个指针，因此当你使用 console.log 输出之后，其内容并没有真正显示，而当你点开下面的箭头<div id="app">……</div>展开具体内容时，显示的是该指针指向对象的当前内容，因此，beforeUpdate和Updated两个中的this.$el看上去都一样。）