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('')
  }}})


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM