Vue watch的使用介紹

一、說明

在vue中，使用watch來響應數據的變化。watch的用法大致有三種。下面會詳細介紹下watch的使用

二、使用

1、單純的對值進行監聽，當demo的值發生變化時，value的值也會隨着變化，直接看代碼：

<template>
  <div>
    <el-input v-model="demo"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: '',
        value: ''
      };
    },
    watch: {
      demo(val) {
        this.value = this.demo;
      }
    }
  };
</script>

2、對對象進行監聽，如果watch監測的是一個對象的話，直接使用watch是不行的，此時我們可以藉助於computed計算屬性來完成：

<template>
  <div>
    <el-input v-model="demo.name"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: {
          name: ''
        },
        value: ''
      };
    },
    computed: {
      newName() {
        return this.demo.name;
      }
    },
    watch: {
      newName(val) {
        this.value = val;
      }
    }
  };
</script>

3、監聽數組的變化：

<div id="app">
  <input type="text" v-model="childrens.name" />
  <input type="text" v-model="lastName" />
</div>

<script type="text/javascript">
  var vm = new Vue( {
    el: '#app',
    data: {
      childrens: {
        name: '小強',
        age: 20,
        sex: '男'
      },
      tdArray:["1","2"],
      lastName:"張三"
    },
    watch:{
      //以V-model綁定數據時使用的數據變化監測
      childrens:{
        handler:function(val,oldval){
          console.log(val.name)
        },
        deep:true  // 對象內部的屬性監聽，也叫深度監聽
      },
      // 鍵路徑必須加上引號
      'childrens.name':function(val,oldval){
        console.log(val+"aaa")
      },  
      lastName:function(val,oldval){
        console.log(this.lastName)
      }
    },
  } );
  //主動調用$watch方法來進行數據監測
  vm.$watch("lastName",function(val,oldval){
    console.log(val)
  })
</script>
</body>

三、補充

immediate和handler

這樣使用watch時有一個特點，就是當值第一次綁定的時候，不會執行監聽函數，只有值發生改變纔會執行。如果我們需要在最初綁定值的時候也執行函數，則就需要用到immediate屬性。

比如當父組件向子組件動態傳值時，子組件props首次獲取到父組件傳來的默認值時，也需要執行函數，此時就需要將immediate設爲true。我們拿第一個例子的代碼來說明下immediate和handler的使用方法。

<template>
  <div>
    <el-input v-model="demo"></el-input>
    {{value}}
  </div>
</template>
<script>
  export default {
    name: 'index',
    data() {
      return {
        demo: '',
        value: ''
      };
    },
    watch: {
      demo(val) {
        this.value = this.demo;
        // handler的使用
        handler(newName, oldName) {
      　　 console.log(newName)
          console.log(oldName)
    　　},
       // immediate的使用
    　　immediate: true
      }
    }
  };
</script>

監聽的數據後面寫成對象形式，包含handler方法和immediate，之前我們寫的函數其實就是在寫這個handler方法；

immediate表示在watch中首次綁定的時候，是否執行handler，值爲true則表示在watch中聲明的時候，就立即執行handler方法，值爲false，則和一般使用watch一樣，在數據發生變化的時候才執行handler。