Option API#watch 以及 computed


  • watch主要是監聽單一個data的值,只要data值有變化,它就會觸發一些事件(methods),可以藉由觸發事件改變原來data的值或是重新取得遠端的資料都是沒有問題的
    • watch並不會也不是重新產生新的值喔,主要是在運算後修改了data的內容,當data有更新或有變化的時候,watch會將這個data值重新渲染到畫面上

watch 監聽單一變數

  • 當我們要監聽一個值的時候,我們會產生一個watch的物件,而他所監聽的data值也正是這個watch物件中"函式的名稱":
    • 例如本章中watch要監聽input中的tempName這個data值,tempName就會是watch物件中的方法函式名稱
    • 而tempName這個函式會有兩個參數,一個為新的值n(new),一個為舊的值o(old)
    • 透過這樣可以做一個簡單的驗證,當我們的值不符合需求時可以做一個簡單的回饋,當值符合需求也可以存入到變數

      ## watch 監聽單一變數,觸發事件
  • 監聽單一變數,觸發事件
  • 該函式可同時操作多個變數
  • 跟元件溝通之間有關係的watch
    ## watch 監聽數值

watch 監聽props

computed

  • 大部分的情境下會把data值讀取出來(只讀data不寫入),重新運算出結果之後,在渲染在畫面上
    • 如何使用computed?
      • 先定義一個computed物件
      • 將他要產生的值(total變數)作為函式寫入在computed物件中
      • 在這個computed中的total函式產生的運算結果會直接渲染在畫面上
  • 也會用在search匡比對
  • 監聽多個變數觸發事件
  • 會產生一個值







你可能感興趣的文章

交作業流程 Week1-hw1

交作業流程 Week1-hw1

 Laravel 入門:認識 Migration

Laravel 入門:認識 Migration

[JavaScript] ES6:Destructuring 解構

[JavaScript] ES6:Destructuring 解構






留言討論