watch是什么？

watch：偵聽器，是Vue實例的一個屬性，是用來響應數(shù)據(jù)的變化，需要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作時，這個方式是最有用的。

watch的使用

watch基礎語法

watch: {
?? ?被監(jiān)聽的數(shù)據(jù): {
?? ??? ?handler(數(shù)據(jù)改變后的值, 數(shù)據(jù)改變之前的值) {
?? ??? ??? ?相關代碼邏輯...
?? ??? ?}
?? ?}
}

• 被監(jiān)聽的數(shù)據(jù)：data中定義的數(shù)據(jù)；
• 數(shù)據(jù)改變后的值：該數(shù)據(jù)改變后的新值；
• 數(shù)據(jù)改變之前的值：該數(shù)據(jù)改變之前的值。

$watch()監(jiān)聽某個值（雙向綁定）的變化，一旦發(fā)生變化，就調用引號里的方法，從而達到change事件監(jiān)聽的效果??！

首先確認 watch是一個對象，一定要當成對象來用。 對象就有鍵，有值。 
鍵：就是你要監(jiān)控的那個家伙，比如說$route，這個就是要監(jiān)控路由的變化?；蛘呤莇ata中的某個變量。 
值可以是函數(shù)：就是當你監(jiān)控的家伙變化時，需要執(zhí)行的函數(shù)，這個函數(shù)有兩個形參，第一個是變化后的值，第二個是原始值。 
值也可以是函數(shù)名：不過這個函數(shù)名要用單引號來包裹。 
值是包括選項的對象：選項包括有三個，如下

• 第一個handler：其值是一個回調函數(shù)。即監(jiān)聽到變化時應該執(zhí)行的函數(shù)。
• 第二個是deep：其值是true或false；確認是否深入監(jiān)聽。（一般監(jiān)聽時是不能監(jiān)聽到對象屬性值的變化的，數(shù)組的值變化可以聽到。）
• 第三個是immediate：其值是true或false；確認是否以當前的初始值執(zhí)行handler的函數(shù)。

對于immediate和deep，我有以下兩點理解：

1，immediate設為true后，則監(jiān)聽的這個對象會立即輸出，也就是說一刷新頁面就會在控制臺輸出，當然此時頁面上的數(shù)據(jù)我們還沒來得及手動讓其發(fā)生變化，所以在控制臺輸出的newValue為我們在代碼中默認設置的值，oldValue輸出為“undefined”。如

當我們手動改變newValue.id的值后，輸出如下：

如果不設置immediate，或者將immediate設為false的話，則刷新頁面后不會立即監(jiān)聽此對象，也就是控制臺不會有輸出，必須要監(jiān)聽的對象有值改變時控制臺才會有輸出。

2，deep設為true后，就可以深入監(jiān)聽了。簡單點說，就是可以監(jiān)聽到對象里面的值的變化了。比如上面這個例子中，對象是“student”，這個對象里面的值有：id:1和studentName：‘李疆’，即

然后我們在<input>中綁定student.studentName，如下

正常情況下，watch是不能直接監(jiān)聽到student對象中的studentName的，也就是說在頁面改變studentName的值，控制臺是不會有任何反應的。但是，如果我們設置deep為true后，此時在頁面改變studentName的值，控制臺就會輸出studentName的值，也就是能夠監(jiān)聽到student對象中的studentName。好像有點繞，，

先看一下運行結果：

附上代碼：

<template>
  <div class="about">
    <!-- <h1>This is an about page</h1> -->
    <p>username:<input type="text" v-model="username"> {{username}}</p>
    <p>password:<input type="text" v-model="password"> {{password}}</p>
    <p>age:<input type="text" v-model="age"> {{age}}</p>
    <p>student.id:<input type="text" v-model="student.id"> {{student.id}}</p>
    <p>student.studentName:<input type="text" v-model="student.studentName"> {{student.studentName}}</p>
 
  </div>
</template>
<script>
export default {
  data(){
    return{
      username:'lijiang',
      password:'123',
      age:21,
      student:{
        id:1,
        studentName:'李疆'
      }
    }
  },
  methods:{
     Test:function(newValue,oldValue){
           console.log('newValue:%s,oldValue:%s',newValue,oldValue);
     }
  },
  watch:{
    username:function(newValue,oldValue){
      console.log('username newValue:'+newValue+',username oldValue:'+oldValue);
    },
 
    password:'Test',
 
    age:{
      handler:function(newValue,oldValue){
        console.log('age newValue:'+newValue+',age oldValue:'+oldValue);
      },
      immediate:true //第一次刷新頁面時就會執(zhí)行
    },
 
    student:{
      handler:function(newValue,oldValue){
        console.log('student newValue.id:'+newValue.id+',student oldValue:'+oldValue);
      },
      immediate:true,
      deep:true
    },
    
    'student.studentName':'Test'
  }
}
</script>

例2 

watch的用法-immediate屬性

watch的用法-deep屬性

到此這篇關于Vue中對watch的理解的文章就介紹到這了,更多相關vue watch內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論