筆記(二),VUE V-MODEL 雙向綁定,以及 watch 和 computed的區別

vue官網上的v-model指令的介紹是

 

v-model

• 預期：隨表單控件類型不同而不同。

• 限制：

  • <input>
  • <select>
  • <textarea>
  • components

• 修飾符：

  • .lazy- 取代input監聽change事件
  • .number- 輸入字符串轉為有效的數字
  • .trim- 輸入首尾空格過濾

用法：

在表單控件或者組件上創建雙向綁定。

對於v-model VUE指出在使用表單控件的時候就需要想到v-model

問題: :value的方式只能將內存中模型變量的值綁定到頁面，不能將頁面的修改自動同步到內存中的模型變量上——單向綁定

 解決: 雙向綁定: 既能將內存中模型變量的值綁定到頁面，又能將頁面的修改自動同步到內存中的模型變量上。

 何時: 只要綁定可修改的表單元素，都用v-model

 如何: v-model:value=”模型變量”

   簡寫: v-model=”模型變量”

 原理: 所有帶v-model綁定的元素，都被加入一個監視隊列(watch)，由一個死循環不斷監視隊列中元素的內容變化。只要發生變化，就直接修改綁定的模型變量

 監視函數: 只要頁面變化，就自動執行的函數

對於watch和computed的區別:

computed 計算屬性

計算屬性顧名思義就是通過其他變量計算得來的另一個屬性，fullName在它所依賴firstName，lastName這兩個變量變化時重新計算自己的值。

另外，計算屬性具有緩存。計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味着只要 lastName和firstName都沒有發生改變，多次訪問 fullName計算屬性會立即返回之前的計算結果，而不必再次執行函數。

而觀察watch是觀察一個特定的值，當該值變化時執行特定的函數。例如分頁組件中，我們可以檢測頁碼執行獲取數據的函數。