Vue笔记（4） - 计算属性：computed 与 侦听器：watch

https://cn.vuejs.org/v2/guide/computed.html
不得不说，文档写的真好。想起曾经学Angular、Ionic时看的英文文档，学了之后却没什么用，说多了都是泪。

以下笔记部分摘自官网

        {{ info }}

...
var app = new Vue({
            el: '#app',
            data: {
                name: 'heqi',
                age: 20,
                // info: this.name + " " + this.age   这样写不行
            },
            computed: {
                info: function() {
                    return this.name + " " + this.age
                }
            }
        });

这里我们声明了一个计算属性 info。

计算属性缓存 vs 方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：

       {{ info }}
       {{ getInfo() }}
   

methods: {
               getInfo: function() {
                   return this.name + " " + this.age;
               }
           }

不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 name 或者 age 没有发生改变，多次访问 info 计算属性会立即返回之前的计算结果，而不必再次执行函数。

但计算属性好像不能传递模板变量啊？

计算属性 vs 侦听属性

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。你可以在watch中侦听data中定义的属性，并为其指定回调函数，且回调函数的参数为属性改变后的值：

watch: {
    name: function(val) {
        console.log("watch: " + val);
// 这里也可以改变info
        this.info = this.name + " " + this.age
    }
}

watch也是有缓存机制的，但当计算的属性过多时，那需要为每个侦听的属性都要指定回调函数，那代码量将增加不少。所以，当你有一些数据需要随着其它数据变动而变动时，最好的做法是用computed。

计算属性的 setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

info: {
        get: function() {
            return this.name + " " + this.age
        },
        set: function(val) {
            var arr = val.split(" ");
            this.name = arr[0];
            this.age = arr[1];
        }
}

当运行app.info = 'Mike 19';时，info值的会被改变。注意：info值的改变的原因还是因为在set中name值和age值被改变了，而不是app.info = 'Mike 19'。

最后关于computed是在什么时候执行的：
https://segmentfault.com/q/1010000010364198