快捷導(dǎo)航

Vue中對(duì)watch的理解(關(guān)鍵是immediate和deep屬性)

更新時(shí)間：2022年11月07日 14:37:42 作者：李疆~

watch偵聽器，是Vue實(shí)例的一個(gè)屬性，是用來響應(yīng)數(shù)據(jù)的變化，需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，這個(gè)方式是最有用的，這篇文章主要介紹了Vue中對(duì)watch的理解,需要的朋友可以參考下

watch是什么？

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

watch的使用

watch基礎(chǔ)語法

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

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

$watch()監(jiān)聽某個(gè)值（雙向綁定）的變化，一旦發(fā)生變化，就調(diào)用引號(hào)里的方法，從而達(dá)到change事件監(jiān)聽的效果?。?/p>

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

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

對(duì)于immediate和deep，我有以下兩點(diǎn)理解：

1，immediate設(shè)為true后，則監(jiān)聽的這個(gè)對(duì)象會(huì)立即輸出，也就是說一刷新頁面就會(huì)在控制臺(tái)輸出，當(dāng)然此時(shí)頁面上的數(shù)據(jù)我們還沒來得及手動(dòng)讓其發(fā)生變化，所以在控制臺(tái)輸出的newValue為我們?cè)诖a中默認(rèn)設(shè)置的值，oldValue輸出為“undefined”。如

當(dāng)我們手動(dòng)改變newValue.id的值后，輸出如下：

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

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

然后我們?cè)?lt;input>中綁定student.studentName，如下

正常情況下，watch是不能直接監(jiān)聽到student對(duì)象中的studentName的，也就是說在頁面改變studentName的值，控制臺(tái)是不會(huì)有任何反應(yīng)的。但是，如果我們?cè)O(shè)置deep為true后，此時(shí)在頁面改變studentName的值，控制臺(tái)就會(huì)輸出studentName的值，也就是能夠監(jiān)聽到student對(duì)象中的studentName。好像有點(diǎn)繞，，

先看一下運(yùn)行結(jié)果：

附上代碼：

<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 //第一次刷新頁面時(shí)就會(huì)執(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屬性