computed计算属性和data_vue中的computed

首先要说，methods,watch和computed都是以函数为基础的，但各自却都不同；

一、computer

当页面中有某些数据依赖其他数据进行变动的时候，可以使用计算属性。

<p id="app">  {{fullName}}  </p>

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

需要注意的是，就算在data中没有直接声明出要计算的变量，也可以直接在computed中写入。

计算属性默认只有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]
            }
        }
    }

这个时候在控制台直接运行vm.fullName = ‘bibi wang’，相应的firstName和lastName也会改变。

适用场景：