1.4 计算属性——第1章 Vue起步知识

Vue的HTML模板里，可以用一些简单的运算表达式，放在{{}}里面，但在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于任何复杂逻辑，都应当使用计算属性。注意：computed中的属性不能与data中的属性同名，否则会报错。

    什么是计算属性呢？就是把data里的属性改变一下，就叫计算属性，若便于理解的话，内心里把它叫做“改变属性”，或叫做“变异属性”，所以，计算属性里必须包含data的属性，由data属性变异的。

1.4.1 计算属性的举例说明

计算属性是在computed对象里，代码示例：

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

fullName就是计算属性，由data的属性firstName和lastName合并而产生的，可以通过this.fullName访问。

 

下面的代码，如果不用计算属性，直接在模板里的写表达式，就显得笨重了：

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

如果用计算属性，在模板里直接写这个属性名，把逻辑写到Vue计算属性里，就显得很优雅，也方便代码维护。

<div id="example">
    {{ reversedMessage }}
</div>

   reversedMessage就是计算属性名，它是一个函数，返回split('').reverse().join('')，如下所示：

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello'
        },
        computed: {
            reversedMessage: function () {
                return this.message.split('').reverse().join('')
            }
        }
    })
</script>

可以像绑定普通 property 一样在模板中绑定计算属性。Vue 知道 vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时， vm.reversedMessage 会被重新计算，这或者是叫计算属性的缘故吧。

1.4.2 计算属性和侦听属性比较

Vue提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。侦听属性也是冲着data的属性来的，不要被新名称吓到，不是新的东西，就当作是偷窥data的属性变化的玩意。

var app = new Vue({
    el: '#demo',
    data: {
        firstName: '张',
        lastName: '三',
        fullName: '张 三'
    },
    watch: {
        firstName: function (val) {
            this.fullName = val + ' ' + this.lastName
        },
        lastName: function (val) {
            this.fullName = this.firstName + ' ' + val
        }
    }
})

侦听（watch）firstName和lastName，当这两个值发生变化时，让fullName也跟着变化，起到作用就是watch。计算属性也可以起到侦听作用，如下代码：

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

计算属性和侦听属性的比较：

（1）计算属性是当属性变化时，返回一个值。

（2）侦听属性是当属性变化时，执行一个操作。

1.4.3 计算属性的setter方法

计算属性默认是getter方法，只能读，不能写。如果非要写，自行提供setter方法。如下：

computed: {
    fullName: {
        // getter
        get: function () {
            return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
            var names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
        }
    }
}

如果给fullName赋值，可以同时改写firstName和lastName的值。赋值方式：vm.fullName=’张 三’。

----------------------------------------------------------------------------------------------------------------
本内容为《抹平Vue学习曲线》的部分章节，需要阅读完整书籍的，可以跟作者沟通。
----------------------------------------------------------------------------------------------------------------