Vue.js 计算属性 原

计算属性与methods方法 模板内的表达式是非常便利的，但在模板中放太多的逻辑会让模板过重且难以维护，对于复杂的逻辑应该使用计算属性 <div id="example">   <p>Original message: "{{ message }}"</p>   <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> var vm = new Vue({   el: '#example',   data: {     message: 'Hello'   },   computed: {     // a computed getter     reversedMessage: function () {       // `this` points to the vm instance       return this.message.split('').reverse().join('')     }   } }) 同样用methods可以达到与computed一样的效果 <p>Reversed message: "{{ reversedMessage() }}"</p> methods: {   reversedMessage: function () {     return this.message.split('').reverse().join('')   } } 使用computed与methods最终的结果是相同的，不同的是计算属性是基于它们的依赖进行缓存的，计算属性只有在它的相互依赖改变时才会重新求值，意味着只要message不发生变化，多次访问reversedMessage 计算属性会立即返回之前的计算结果，而不必执行函数，相比之言，只要发生重新渲染，methods调用总会执行该函数，如果不希望有缓存，请使用methods

计算属性与Watched属性 Vue 确实提供了一种更通用的方式来观察与响应实例上的数据变化，你很容易滥用watch,特别是如果你之前使用过Angular JS,通常更好的方法是使用computed属性而不是命令式的watch回调 如下的例子是使用vatch来监听firstName与lastName的变化，如果变化则给fullName重新赋值，特别注意在data初始化时就要有fullName 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,不过在需要时你也可以提供一个setter  <script>     var app = new Vue({         el: "#app",         data: { firstName: "wang", lastName: "lily2" },         computed: {             fullName: {                 get: function() {                     return this.firstName + " " + this.lastName;                 },                 set: function(newValue) {                     names = newValue.split(" ");                     this.firstName = names[0];                     this.lastName = names[1];                 }             }         }     })     app.fullName = 'John Doe'     </script> 现在再运行 ，setter 会被调用，vm.firstName 和 vm.lastName 也相应地会被更新。 

(adsbygoogle = window.adsbygoogle || []).push({});