Vue2.0生命周期的示例分析

  
  
  



  {{message}}

用template/rander选项可以在控制台清楚的看到：挂载完成后，el被新创建的vm.$el替换。

挂载前是以初始的el和虚拟DOM的形式存在的，此时以template中的内容为模板，模板内容不可见，打印p标签为null；

挂载后，模板渲染的新DOM替换原来的el，原el所对应的DOM不存在，打印a标签为null。

 beforeUpdate 和 updated

当data对象中数据更新时，会触发 beforeUpdate钩子，此时view层还没有更新。 beforeUpdate有下面几个需要注意的地方：

a、更新的数据必须在模板中直接或间接的使用，才会触发beforeUpdate；

b、在挂载之前，data中数据更新不会触发 beforeUpdate！即在created、beforeMount时改变数据不会触发更新流程；

c、如果在beforeUpdate中，再次修改了该数据的值，会再次触发beforeUpdate钩子，进行两次更新流程。

updated时，view层已更新完毕。

（在上面的代码中增加两个钩子）

mounted: function () {
  this.message = 'first';
//   this.show = false;    // 由于模板中没有用到show，所以show的改变不会触发beforeUpdate
},
beforeUpdate: function () {
  console.group('beforeUpdate 更新前状态===============》');
  let elp = document.getElementById('elp').innerHTML;
  console.log('message：' + this.message);
  console.log('DOM：' + elp);
},
updated: function () {
  console.group('updated 更新完成状态===============》');
  let elp = document.getElementById('elp').innerHTML;
  console.log('message：' + this.message);
  console.log('DOM：' + elp);
}

这里需要注意一点：view层我们需要通过innerHTML获取对应元素节点中的内容，而不能直接获取元素节点。直接获取元素节点，在控制台打印出来的view层中的数据都是更新之后的状态，不能打印出实时的正确的值，这应该和Chrome控制台的输出有关。

针对第三条，我们看一下下面的代码演示：

mounted: function () {
  this.message = 'first';
},
beforeUpdate: function () {
  console.group('beforeUpdate 更新前状态===============》');
  let elp = document.getElementById('elp').innerHTML;
  console.log('message：' + this.message);
  console.log('DOM：' + elp);
  this.message = 'second';  // 此时在beforeUpdate中再次修改了message的值
},
updated: function () {
  console.group('updated 更新完成状态===============》');
  let elp = document.getElementById('elp').innerHTML;
  console.log('message：' + this.message);
  console.log('DOM：' + elp);
}

这里我们可以清楚的看到进行了两次更新流程，但是对打印的结果有些疑问：第一次将message的值改为first，并且以first来渲染更新DOM，那么第一次调用updated时，message和DOM中的值都应该是first，而此时打印出来的时second。我理解的是，在第一次执行updated时，DOM就已经完成了第二次渲染更新，具体的过程还需要通过之后对源码的学习去理解。这里各位有不同的理解或者更详细的解释，可以在评论区留言，共同学习。

在这里，我们可以在beforeUpdate中加定时器去修改message的值，就可以等待第一次数据改变，DOM更新渲染完成后，进行第二次数据改变。

beforeUpdate: function () {
  console.group('beforeUpdate 更新前状态===============》');
  let elp = document.getElementById('elp').innerHTML;
  console.log('message：' + this.message);
  console.log('DOM：' + elp);
  var that = this;
  setTimeout(function(){
  　　that.message = 'second';
  });
//  this.message = 'second';  // 此时在beforeUpdate中再次修改了message的值
},

这里可以清楚看到两次数据改变时，数据和view层的更新状态。

beforeDestroy 和 destroyed

beforeDestroy：实例在销毁之前调用，此时实例仍然可用。

beforeDestroy -> destroyed： Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

destroyed：vue实例销毁后调用。

以上是“Vue2.0生命周期的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！