Vue实例的计算属性

Vue实例的computed的属性

 <div class="test">
        <p>原始的信息{{message}}</p>
        <p>计算后的信息{{ComputedMessage}}</p>
    </div>

js代码

  var myVue = new Vue({
        el: ".test",
        data: {
            message:12
        },
        computed:{
            ComputedMessage:function () {
                return this.message+10;
            }
        }
    });

界面会显示 12 和 22
上述的方式是一种缓冲的实现的效果，这种实现的方式依赖于它的缓寸，计算得到的属性只有在相关依赖（message）改变的时候才会重新取值，这就意味着只要message没有发生改变的时候，多次访问ComputedMessage都不会再重新执行计算的这个属性。。
计算后的ComputedMessage属性始终是依赖于message的

通过调用函数实现同样的效果

  <div class="test">
        <p>原始的信息{{message}}</p>
        <p>计算后的信息{{MessageFunction()}}</p>
    </div>

js代码

 var myVue = new Vue({
        el: ".test",
        data: {
            message:12
        },
        methods:{
            MessageFunction:function () {
                return this.message+10;
            }
        }
    });

得到的结果和上面的结果是一样的，但是每次被重新渲染的时候都会被重新调用。
所以使用上述两种方式的时候，首先要确定你是否需要借助缓存

使用vue实例的watch

这个没有看懂呀
但是使用computed这个属性更加的方便和快捷

    <div class="test">
        <p>原始的信息{{fullName}}</p>
    </div>

js代码

    var myVue = new Vue({
        el: ".test",
        data: {
            firstName:"fur",
            lastName:"bool"
        },
        computed:{
           fullName:function () {
               return this.firstName+this.lastName
           }
        }
    });

而且你可以computed属性设置setter getter是默认就有的
演示set和get的调用过程

   <div class="test">
        <p>原始的信息{{fullName}}</p>
        <button @click="fu">test</button>
    </div>

js代码

 var myVue = new Vue({
        el: ".test",
        data: {
            firstName:"fur",
            lastName:"bool",
            fullName:"sasas dsdsd dsds"
        },
        computed:{
           fullName:{
               get:function () {
                   console.log("get")
                   return this.firstName+this.lastName
               },
               set:function(value){
                   var names=value.split(" ");
                   this.firstName=names[0];
                   this.lastName=names[names.length-1];
                   console.log("set");
               }
           }
        },
        methods:{
            fu:function () {
                myVue.fullName="sasas dsdsd dsds";
                console.log(myVue.firstName);     //sasas
                console.log(myVue.lastName);    //dsds
            }
        }
    });

首先会输出get
在点击按钮为fullName赋值的时候首先调用set 再调用get方法

自定义的Watcher

虽然计算属性在大多数情况下是非常合适的，但是有的时候也需要自定义一个watcher。这是因为你想要在数据变化响应的时候，执行异步操作胡总和其他的操作是非常有用的