vue 生命周期 返回不触发_vue生命周期注意事项

1、beforeUpdate

注意：并不是每次更新data中的数据都会触发beforeUpdate钩子函数，因为只有data中的数据使用在template模板中更新时才会触发beforeUpdate钩子函数。同理，在updated钩子函数修改data中的数据，如果数据未在template模板中使用，不会触发beforeUpdate钩子函数，也不会造成死循环的。

export default {

data () {

return {

number: 1

}

},

mounted () {

console.log('---------实例挂载完成--------------')

console.log('el挂载为：', this.$el)

console.log('data为：', this.$data)

console.log('data属性为：', this.number)

this.number += 1 // 此处修改data的number值不会触发updated函数,因为number属性没有在template模板中使用。

},

beforeUpdate () {

console.log('---------更新数据前--------------')

console.log('el挂载为：', this.$el)

console.log('data为：', this.$data)

console.log('data属性为：', this.number)

},

updated () {

console.log('---------更新数据后--------------')

console.log('el挂载为：', this.$el)

console.log('data为：', this.$data)

console.log('data属性为：', this.number)

this.number += 1 //此处修改data的number值不会触发updated函数,因为number属性没有在template模板中使用。也不会造成beforeUpdate函数死循环。

}

}

输出结果：

image.png

总结：更新数据时会不会执行beforeUpdate钩子函数要看更新的数据是否在template模板中使用。

image.png