vue中methods,computed,watch方法的區別 ...
vue中mothods,computed,watch方法的區別
對於一些需要變動的值,比如最初的時候有一個值,在之後我們要將他進行改變。
可選的思路:
1.通過change或者click等這類事件來觸發一個函數,在函數內部去修改一個變數。
2.通過watch的方法,監聽被改變的變數,然後在watch的那個變數命名的函數中去對我們要修改的值進行重新的賦值,或者是觸發一次更新。
3.使用computed的方法,監聽一個變數,通過return一個新的變數的方式來更新一個變數的數據。
執行的不同點
1.methods的方法是通過觸發一個事件或者函數的回調來實現數據的更新,他的執行,依賴於事件的觸發。
2.watch的類似於emit與on這種觸發的方式,通過vue的$watch實例監聽值得改變來自動的觸發一個函數的執行。
3.computed函數的執行最快也是執行最靠前的,在html渲染開始,就已經執行了。
應用場景
methods事件的觸發就不說了,直接回調或者是綁定的@這樣的事件來觸發。
而watch的觸發消耗也大,每次數據的改變就要觸發一次函數的執行,要節省著點用啊。
computed用在改變一個變數的顯示,和data對象里的數據屬性是同一類的。返回的值直接就修改掉了原先的值,最大的優點在於簡潔速度快也可以作為一個過濾器用也可以起到data中聲明一個變數的作用,依賴別的變數來顯示新的變數。
<p>Computed reversed message: "{{ reversedMessage }}"</p>
<p>Computed reversed message: "{{message.split('').reverse().join('')}}"</p>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
//代替上邊的模板的表達式
return this.message.split('').reverse().join('')
}}})