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

computed和methods

• 计算属性是基于它们的响应式依赖进行缓存的。
• 方法不是基于响应式依赖。每修改相关响应式值时，调用方法将总会再次执行函数。
• 当修改相关响应式值时，基于响应式依赖的值会随之改变。但如果该值不是响应式依赖，则需要通过方法来改变。

例如：Date.now() 不是响应式依赖。

当 now 是计算属性时

<div id="example">
    <p>Original message: "{{ message }}"</p>
    <p>Reversed message: "{{ reversedMessage }}"</p>
    <p>{{ now }}</p>
</div>

var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello'
        },
        computed: {
        	reversedMessage: function () {
                return this.message.split('').reverse().join('')
            },
            now: function () {
                return Date.now()
            }
        }

结果如下：

Original message: "Hello"
Reversed message: "olleH"
1612450853684

当修改message值时，

vm.message = 'Goodbye'

Date.now() 的值不会发生改变。

Original message: "Goodbye"
Reversed message: "eybdooG"
1612450853684

当 now 是方法时

<div id="example">
        <p>Original message: "{{ message }}"</p>
        <p>Reversed message: "{{ reversedMessage() }}"</p>
        <p>{{now()}}</p>
    </div>

var vm = new Vue({
        el: '#example',
        data: {
            message: 'Hello'
        },
        methods: {
            reversedMessage: function () {
                return this.message.split('').reverse().join('')
            },
            now: function () {
                return Date.now()
            }
        }

结果如下：

Original message: "Hello"
Reversed message: "olleH"
1612451183294

当修改message值时，

vm.message = 'Goodbye'

Date.now() 的值将会发生改变。

Original message: "Goodbye"
Reversed message: "eybdooG"
1612451265154