[https://jsrun.pro/7vfKp/edit](https://jsrun.pro/7vfKp/edit) ### 计算属性 模板中放入太多的逻辑会让模板过重且难以维护。 ``` <div id="example"> {{ message.split('').reverse().join('') }} </div> ``` 这里要显示变量message的翻转字符串。 于是可以使用计算属性。 #### 实例 ``` var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) ``` reversedMessage 是声明的计算属性，vm.reversedMessage相当于getter 函数： ``` console.log(vm.reversedMessage) // => 'olleH' vm.message = 'Goodbye' console.log(vm.reversedMessage) // => 'eybdooG' ``` ####　方法 在表达式中调用方法同样可以达到以上效果 ``` <p>Reversed message: "{{ reversedMessage() }}"</p> // 在组件中 methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } } ``` 将统一函数定义成一个计算属性或是方法,结果是相同的。但不同的是计算属性是基于它们的响应式依赖进行缓存的。只有响应式依赖发生改变时才会重新求值。多次访问直接返回不需要计算，效率更高。 * 需要缓存，用属性； * 不需要缓存，用方法 ### 计算属性 vs 侦听属性 侦听属性： 观察和响应Vue实例上的数据变动。 ``` <div id="demo">{{ fullName }}</div> ``` 侦听属性 ``` var vm = new Vue({ el: '#demo', 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 } } }) ``` 计算属性 ``` var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName } } }) ``` #### 计算属性 的 setter 计算属性默认只有getter ，不过也可以提供getter方法。 ``` // ... 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 = 'John Doe'`时，setter 会被调用，`vm.firstName`和`vm.lastName`也会相应地被更新。 ### 侦听器 watch 当需要在数据变化时执行异步或开销大的操作时，这个方式时有用的。