目录
官方图
mounted表示vue实例挂载完成;
beforeUpdate在data数据被改变后触发
updated表示更新DOM完成。
理解beforeUpdate:视图层的数据改变时触发
这里需要注意的是beforeUpdate是在data数据被改变后触发,这里的data数据改变如何理解,仅从字面上理解只要data数据值改变就会触发beforeUpdate吗?答案是否定的,我们做个测试。
我们在mounted里修改data的值,mounted表示实例已经挂载完成,因此从理论上来说在在mounted里修改data会触发beforeUpdate,测试代码如下:
App.vue中:
<template>
<div id="app">
</div>
</template>
<script>
export default {
data() {
return {
message: 10,
}
},
mounted: function() {
console.group('------mounted 挂载结束状态(父)------');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
this.message += 1
console.log("%c%s", "color:red","message: " + this.message);
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态(父)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态(父)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
}
}
</script>
<style>
.eac{
background: lightgreen;
}
li{
display: inline;
margin: 10px;
}
</style>
可以看到,初始的message为10,mounted里+1后变为11,data数据改变,但是没有触发beforedate,这是为什么?原因在于beforedate是针对视图层,视图层的数据发生改变才会触发,我们在模板中加上一个显示标签
<template>
<div id="app">
<p>{{message}}</p>
</div>
</template>
这时的结果是:
beforeUpdate的测试
如果视图层数据被改变后,会触发beforeUpdate,如果在beforeUpdate里再一次改变数据,此时会再一次触发beforeUpdate吗?
测试代码如下:
mounted: function() {
console.group('------mounted 挂载结束状态(父)------');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
this.message += 1
console.log("%c%s", "color:red","message: " + this.message);
},
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态(父)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
this.message += 1
console.log("%c%s", "color:red","message: " + this.message);
}
可以看到没有,原因和上边一样,mounted改变了message,视图层的message发生变化,此时触发beforeUpdate,尽管beforeUpdate再次改变了message,但此时mounted改变过后的message还没有更新到视图层,因此在beforeUpdate里再次变化message的是没有更新到视图层的message,当然不会再次触发beforeUpdate。
updated的测试
那假如在updated里改变数据呢?此时的由mounted改变的message已经跟新至视图层,此时在updated改变message就会触发beforeUpdate。测试代码如下:
beforeUpdate: function () {
console.group('beforeUpdate 更新前状态(父)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated 更新完成状态(父)===============》');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
this.message = 12
}
可以看到,在updated里改变message后触发了beforeupdate,如果将
this.message = 12
改为
this.message += 1
程序将会无限循环下去,陷入死循环