beforeUpdate()
页面渲染更新前,挂载之后数据更新的时候触发,
数据已经更新,但是页面中的接节点中的数据
依然是旧的数据,dom还未修改
updated()
页面渲染更新后,页面中的节点数据为最新的数据
Vue.component('son', {
template: '#son',
data() {
return {
num: 4
}
},
methods: {
change() {
this.num ++;
}
beforeUpdate() {
console.log('更新之前')
console.log(this)
console.log(this.num) // 更新后的数据
console.log(this.$refs.p) // 更新前的数据
console.log(this.$refs.p.innerHTML) // 更新前的数据
setTimeout(()=>{
console.log('setTimeOut',this.$refs.p.innerHTML) // 更新后的数据
})
},
updated() {
console.log('更新结束')
console.log(this)
// 做数据修改注意在注意!!!!!
console.log(this.num) // 更新后的数据
console.log(this.$refs.p) // 更新前的数据
console.log(this.$refs.p.innerHTML) // 更新前的数据
}
})
new Vue({}).$mount('#app')