Vue-计算属性

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中多次引用此处的翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

实例

<div id="box">
    {{myname.substring(0,1).toUpperCase() + myname.substring(1)}}

    <p>计算属性：{{getName}}</p>
    <p>计算属性：{{getName}}</p>

    <p>方法：{{getNameMethod()}}</p>
    <p>方法：{{getNameMethod()}}</p>
</div>    

var vm =  new Vue({
    el:"#box",
    data:{
        myname:"retr0"
    },
    methods: {
        getNameMethod(){
            console.log("getNameMethod")
            return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
        }
    },
    computed: {
        getName(){
            console.log("getName-computed")
            return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
        }
    },
})

计算缓存 VS methods

1. 计算属性是基于它们的依赖进行缓存的
2. 计算属性只有在它的相关依赖发生改变时才会重新求值

get() set()

<div id='box'>
    <input type='checkbox' v-model='isAllChecked'>
</div>

new Vue({
    el:'#box',
    data:{
        check:false
    },
    computed:{
        isAllChecked:{
            get(){
                //...doSomeThings
                return some //必须要return
            },
            set(newvalue){
                //doSomeThing(newValue)
            }
        }
    }
})