Vue语法学习第三课——计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。对于任何复杂逻辑，都应当使用计算属性。

<div id="example">
        <p>
            original message : "{{message}}"
        </p>
        <p>
            computed reversed message : "{{reverseMessage}}"
        </p>
    
    </div>

    <script>
        var vm = new Vue({
            el:"#example",
            data:{
                message : "zxq"
            },
            computed : {
                reverseMessage : function(){
                    return this.message.split('').reverse().join('');
                }
            }
        });
    </script>

 同样的效果也可以通过在表达式中调用methods实现。

注：计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，计算属性才会重新求值。

如上示例，只有当message改变时，多次访问 reverseMessage 计算属性才会再次执行函数，否则会返回之前的结果。

而对比methods，总是会再次执行函数。

 

computed 和 watch

<div id="app0">
        firstname : <input type="text" v-model="firstName"/><br/>
        lastname  : <input type="text" v-model="lastName"/>
        <p>
            my name is : {{fullName}}
        </p>
</div>

 

① watch

　　　　var vm = new Vue({
            el: '#app0',
            data: {
                firstName: 'Foo',
                lastName: 'Bar',
                fullName: 'Foo Bar'
            },
            watch: {
                firstName: function (val) {
                    this.fullName = val + ' ' + this.lastName
                },
                lastName: function (val) {
                    this.fullName = this.firstName + ' ' + val
                }
            }
        })

 

 

② computed

　　　　 var vm = new Vue({
            el: '#app0',
            data: {
                firstName: 'Foo',
                lastName: 'Bar'
            },
            computed: {
                fullName: function () {
                    return this.firstName + ' ' + this.lastName
                }
            }
        })

 

相比之下，计算属性更为简洁

 

计算属性默认只有get方法，但在必要时也可以提供一个set方法

　　<div id="example">
        firstname     :     <input type="text" v-model="firstName"/><br/>
        lastname      :     <input type="text" v-model="lastName"/><br/>
        my name is 　 :    　<input v-model="fullName" />
    
    </div>

    <script>
        var vm = new Vue({
            el:"#example",
            data: {
                firstName: 'zhu',
                lastName: 'xingqing'
            },
            computed : {
                fullName : {
                    get : function(){
                        return this.firstName + ' ' + this.lastName
                    },
                    set : function(newVal){
                        newfull = newVal.split(' ');
                        this.firstName = newfull[0];
                        this.lastName = newfull[1];
                    }
                }
            }
        });
    </script>