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()
      })
    }
  }
})