每一个 Vue 实例在被建立时都要通过一系列的初始化过程——例如,须要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新DOM等。同时在这个过程当中也会运行一些叫作生命周期钩子的函数,这给了用户在不一样阶段添加本身的代码的机会html
下面逐步解读各个钩子函数的步骤vue
优先级: render > template > outerHTMLajax
vm.el已完成DOM的挂载与渲染,此刻打印vm.$el,发现以前的挂载点及内容已被替换成新的DOM算法
经过实例验证一下chrome
<div id="app">
<h1 ref="h1" id="h1">{{message}}</h1>
<button @click="changeMsg">change</button>
</div>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue的生命周期'
},
template: '<h2 id="h2">{{message}}</h2>',
beforeMount: function() {
console.group('------beforeMount 挂载前------');
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
let h1 = document.getElementById('h1')
let h2 = document.getElementById('h2')
console.log('h1:',h1)
console.log('h2:',h2)
},
mounted: function() {
console.group('------mounted 挂载完成------');
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
let h1 = document.getElementById('h1')
let h2 = document.getElementById('h2')
console.log('h1:',h1)
console.log('h2:',h2)
},
}
复制代码
当渲染在模板上的data数据更新时,会触发beforeUpdate方法bash
正常更新操做app
beforeUpdate: function () {
console.group('beforeUpdate 更新前===============》');
console.log("%c%s", "color:red","message: " + this.message);
console.log(this.$refs.h1.innerHTML)
},
updated: function () {
console.group('updated 更新完成===============》');
console.log("%c%s", "color:red","message: " + this.message);
console.log(this.$refs.h1.innerHTML)
},
复制代码
在updated中修改数据dom
beforeUpdate: function () {
console.group('beforeUpdate 更新前===============》');
console.log("%c%s", "color:red","message: " + this.message);
console.log(this.$refs.h1.innerHTML)
},
updated: function () {
console.group('updated 更新完成===============》');
console.log("%c%s", "color:red","message: " + this.message);
console.log(this.$refs.h1.innerHTML)
this.message = 'updated2'
},
复制代码