lifecycle.png
beforeUpdate
- 当数据一旦更新，就会调用这个构造
在挂载以后，数据已经更新，但是页面还没更新
更新.PNG
<div class="root" :n="n">
<h1>让n加1: {{n}}</h1>
<button @click="add">点击加1</button>
</div>
<script>
Vue.config.devtools = true;
const vm = new Vue({
el:'.root',
data:{
n:1
},
methods:{
add(){
this.n++
}
},
beforeCreate(){
console.log('beforeCreate')
console.log(this)
// debugger
},
created(){
console.log('created')
console.log(this)
//debugger
},
beforMount(){
console.log('beforeMount')
console.log(this)
// debugger
},
mounted(){
console.log('mounted')
console.log(this)
// debugger
},
beforeUpdate(){
console.log('beforeUpdate')
console.log(this.n)//点击button，n变成了2，但是页面没有有更新，数据更新了
debugger
}
})
// vm.$mount('.root')
</script>
beforeUpdate-数据更新-页面没有更新.PNG
- 页面数据未同步
updated
- 根据新新旧虚拟DOM进行对比，最终呈现新DOM，完成Model>>>view的更新
新旧DOM对比.PNG
<div class="root" :n="n">
<h1>让n加1: {{n}}</h1>
<button @click="add">点击加1</button>
</div>
<script>
Vue.config.devtools = true;
const vm = new Vue({
el:'.root',
data:{
n:1
},
methods:{
add(){
this.n++
}
},
beforeCreate(){
console.log('beforeCreate')
console.log(this)
// debugger
},
created(){
console.log('created')
console.log(this)
//debugger
},
beforMount(){
console.log('beforeMount')
console.log(this)
// debugger
},
mounted(){
console.log('mounted')
console.log(this)
// debugger
},
beforeUpdate(){
console.log('beforeUpdate')
console.log(this.n)
// debugger
},
updated(){
console.log('updated')
console.log(this.n)//新旧虚拟DOM对比，形成最终结果
debugger
}
})
// vm.$mount('.root')
</script>
新旧虚拟DOM一致.PNG
- 数据页面都是新的
