Vue.js中计算属性和方法的区别

在vue.js中，计算属性和方法达到的效果是一样的，但是计算属性是基于依赖进行缓存的，只有message发生改变才会导致reverseMessage发生改变，只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数；而方法是每次调用都会执行。

计算属性：

<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> </div> <script> 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('') } } }) </script>

方法：

<div id="example"> <p>Original message: "{{ message }}"</p> <p>Method reversed message: "{{ reversedMessage() }}"</p> </div> <script> var vm = new Vue({ el: '#example', data: { message: 'Hello' }, methods: { reversedMessage: function () { return this.message.split('').reverse().join('') } } }) </script>

需要注意的是，因为 Date.now() 不是响应式依赖，所以

computed: { now: function () { return Date.now() } } 不会更新。必须用methods： methods： { now: function () { return Date.now() } }

计算 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] } } }

现在在运行 vm.fullName = ‘John Doe’ 时， setter 会被调用， vm.firstName 和 vm.lastName 也会被对应更新。

转自博客：https://blog.csdn.net/BigFish123456789/article/details/77941540