Vue学习从入门到精通（四）

  今天我们来学习一下计算属性。在开发中，为了简化逻辑，当某个属性的值依赖于其他属性的值时，我们可以使用计算属性。

什么是计算属性

  计算属性就是当其以来属性的值发生改变时，这个属性的值会自动更新，与之相关的DOM部分也自动更新。具体代码如下：

<template>
    <div id ="example">
        <input type="text" v-model="didi"  />
        <input type="text" v-model="family" />
        <br/>
        didi={{didi}}, family={{family}}, didiFamily={{didiFamily}}
    </div>
</template>
<script>
    export default {
        name:'HelloWorld',
        data (){
            return {
                didi:'didi',
                family:'family'
            }
        },
        computed:{
                didiFamily:function(){
                    return this.didi + ' ' + this.family
                }
            }
    } 
</script>

运行结果如下：

  上面的代码只提供了getter，实际上除了getter,我们还可以设置计算属性的setter。代码示例如下：

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

<script>
    export default{
        name:'HelloWorld',
        data(){
            return {
                didi:'didi',
                family:'family'
            }
        },
        computed:{
            didiFamily:{
                get:function(){

                    return this.didi + ' ' + this.family
                },
                set:function(newVal){
                    var names = newVal.split(' ')
                    this.didi = names[0]
                    this.family = names[1]
                }
            }
        }
    }
</script>

当我们修改didiFamily时，didi和family的值也会自动更新。
  关于计算属性的缓存，默认是开启缓存的，但是cache这个字段现在官网上找不到了，好像不能够让用户去设置了。只能默认开启缓存。这个地方属于个人感悟，如果有不准确的地方，欢迎大家多多批评指正。
   当包含计算属性的节点被移除并且模版中其他地方没有再引用该属性时，那么对应的计算属性的getter方法不会执行。
更多优质文章，可以微信扫码关注：