计算属性

1、计算属性

    计算属性——当其依赖属性的值发生变化时，这个属性的值会自动更新，与其相关的DOM部分也会同步自动更新。

<div id="id1">
    <input type="text" v-model="didi">
    <input type="text" v-model="family">
    <br>
    didi={{didi}},family={{family}},didiFamily = {{didiFamily}}
</div>

var vm1 = new Vue({
        el:"#id1",
        data:{
            didi:"didi",
            family:"family"
        },
        computed:{
            //一个计算属性的getter
            didiFamily:function () {
                //'this'指向vm1实例
                return this.didi + this.family
            }
        }
})

设置计算属性的setter方法，当设置vm.didiFamily的值时，vm.didi和vm.family的值也会自动更新：

var vm = new Vue({
        el:"#id1",
        data:{
            didi:"didi",
            family:"family"
        },
        computed:{
            didiFamily:{
                //一个计算属性的getter
                get:function () {
                    //'this'指向vm1实例
                    return this.didi + ' ' + this.family
                },
                //一个计算属性的setter
                set:function (newVal) {
                    var names = newVal.split(' ')
                    this.didi = names[0]
                    this.family = names[1]
                }
            }
        }
})

2、计算属性的缓存

       在Vue.js 0.12.8版本之前，只要读取相应的计算属性，对应的getter就会重新执行。而在Vue.js 0.12.8版本中，在这方面进行了优化，即只有计算属性依赖的属性值发生了变化时才会重新执行getter。

       这样也会存在一个问题：只有被观察的数据属性发生了变化时才会重新执行getter。但有时候计算属性依赖实时的非观察数据属性（最新的时间）。如：

new Vue({
        data:{
            welcome:'welcome to join us'
        },
        computed:{
            example:function () {
                return Date.now() + this.welcome
            }
        }
    })

       需要在每次访问example时都取得最新时间而不是缓存时间。Vue.js 0.12.11版本开始，默认提供了缓存开关，在计算属性中指定cache字段来控制是否开启缓存。

new Vue({
        data:{
            welcome:'welcome to join us'
        },
        computed:{
            example:{
                //关闭缓存，默认为true
                cache:false,
                get:function () {
                    return Date.now() + this.welcome
                }
            }
        }
    })