0六、Vue.js---watch 屬性（觀察者）

時間 2019-11-18

標籤 vue.js vue watch 屬性觀察者欄目 JavaScript 简体版

原文原文鏈接

一、介紹

官網：Vue 提供了一種更通用的方式來觀察和響應 Vue 實例上的數據變更：偵聽屬性。雖然計算屬性在大多數狀況下更合適，但有時也須要一個自定義的偵聽器。當須要在數據變化時執行異步或開銷較大的操做時，這個方式是最有用的。javascript

二、使用

2.1 簡單使用

watch 屬性（觀察者）完成 Vue 對屬性值修改時的監聽。用於在完成頁面和數據交互以前，對新數據進行判斷和預處理。關鍵字：watch。具體使用以下：html

html部分代碼：java

<body>
  <div id="app">
    <input type="text" v-model="msg">
  </div>
</body>

js部分代碼：app

<script>
  window.onload = function (){
    new Vue({
      el:"#app",
      data:{
        msg:"watch 觀察者"
      },
      watch:{
        //使用觀察者監聽 msg 變量
        msg:function(newValue,oldValue){
          console.log("新數據："+newValue+";舊數據："+oldValue);
        }
      }
    });
  }
</script>

效果演示：異步

watch是一個對象，key值是須要監聽的屬性變量，value值是函數。watch 中的function 有兩個參數，一個是 newValue(變化後的新數據)，一個是oldValue(變化前的新數據)。函數

2.2 分層監視

關鍵字：handler 數據變化時所調用的方法，deep 監視模式。spa

默認狀況下只監聽指定的屬性是否發生變換（單層）。請看下段代碼：雙向綁定

html 部分代碼：code

<body>
  <div id="app">
    <input type="text" v-model="user.name">
    <hr/>
    <input type="text" v-model="userDeep.name">
  </div>
</body>

js 部分代碼：htm

window.onload = function (){
  new Vue({
    el:"#app",
    data:{
      user:{
        name:"Alice",
        age:18
      },
      userDeep:{
        name:"Tome",
        age:19
      }
    },
    watch:{
      // 普通監聽
      user:function(newValue,oldValue){
        console.log("調用普通監聽")
      },
      // 分層監聽
      userDeep:{
        handler:function(newValue,oldValue){
          console.log("調用了分層監聽");
        },
        deep:true
      }
    }
  });
}

在該代碼中，data 中有兩個對象變量 user 和 userDeep。在頁面中第一個 input 框使用 v-model 雙向綁定 user.name，第二個 input 框使用 v-model 雙向綁定 userDeep.name。這裏對 user 採起普通監聽，對 userDeep 採用分層監聽。當改變第一個input框中數據（user.name），未執行監聽函數打印「調用普通監聽」；當改變第二個input框中數據（userDeep.name），執行監聽函數並打印「調用分層監聽」。以下圖：

由於使用普通監聽，只能監聽當層變量變化。使用分層監聽，能夠監聽當層及下層變量的變化。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。