技術標籤：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