7.vue入门基础学习笔记-视图更新执行顺序

在前面的帖子中我们讲到了属性data，计算属性computed，观察者watch，及dom相关的一些指令如v-if，v-html等

那当一个data或者computed的值发生变化到视图更新，是怎样的一个流程呢？

<div id="app">
{{name}}
<ul>
<li v-for="item in allNames">{{item}}</li>
</ul>
</div>
var vue = new Vue({
el:'#app',
data:{
show:true,
},
computed:{

name:{
get:function(){
//alert("name.get()");
log("name.get()");
if(this.show){
return true;
}else{
return false;
}

},
set:function(value){
log("name.set()");
this.name = value;
//注意 这儿是个死循环，
//设置name的值调用这个set
//调用这个set 设置name的值
//然后继续调用这个set
}
},
allNames:{
get:function(){
log("allNames.get()");
//alert("allNames.get()");
if(this.name){
return ["suman","liuxiao","sumomo","other"]
}else{
return ["nan","nv","nan","other"]
}

},
set:function(value){
log("allNames.set()");
this.name = value;
}
}
},
watch:{
show:function(value,oldValue){
log("show.watch()");
},
name:function(value,oldValue){
log("name.watch()");
},allNames:function(value,oldValue){
log("allNames.watch()");
}
}
});
function log(message){
alert(message);
}

调试掉用顺序一定要用alert console打印是异步的 顺序可能会乱 不准确

输入 vue.show=false；

代码分析：

name的值由show决定

allNames的值由name决定

调用watch方法的时候，vue里的值已经发生变化

show值改变时会触发show.watch()方法，然后调用name.get()方法来更新name的缓存值

name值改变时会触发name.watch()方法，然后调用allNames.get()方法来更新allNames的缓存值

allNames值改变时会触发allNames.watch()方法

更新dom操作

show.watch() -> name.get() -> name.watch() -> allNames.get() -> allNames.watch() -> 视图更新

有时候我们可能需要视图更新完成之后再去做一些操作，毕竟如果操作dom，dom还不存在就会报错了，所以在watch里操作dom会有问题，我们可以使用

vm.$nextTick( [callback] ),可以在methods属性的方法里用，也可以在watch的方法里用

new Vue({
// ...
methods: {
// ...
example: function () {
// 修改数据
this.message = 'changed'
// DOM 还没有更新
this.$nextTick(function () {
// DOM 现在更新了
// `this` 绑定到当前实例
this.doSomethingElse()
})
}
}
})

new Vue({
// ...
watch: {
// ...
example: function (value,oldValue) {
// DOM 还没有更新
this.$nextTick(function () {
// DOM 现在更新了
// `this` 绑定到当前实例
this.doSomethingElse()
})
}
}
})