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实例销毁后调用。
结尾：关于vue生命周期就总结完毕，有错误的地方烦请指出，会及时修改！