Vue中watch的簡單應用

Vue.js 有一個方法 watch，它能夠用來監測Vue實例上的數據變更。

若是對應一個對象，鍵是觀察表達式，值是對應回調，值也能夠是方法名，或者是對象，包含選項。

<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>

　　上面這個就淺顯易懂了，經過watch來直接監測demo，若是demo的值變化，value的值也會跟着一塊兒變化。

<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>

　　上面這個例子，若是watch監測的是一個對象的話，直接使用watch是不行的，此時咱們能夠藉助於computed計算屬性來完成。

<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:{
      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)
      }
    },//以V-model綁定數據時使用的數據變化監測
  } );
  vm.$watch("lastName",function(val,oldval){
    console.log(val)
  })//主動調用$watch方法來進行數據監測
</script>
</body>

　　數組的變化，不須要深度watch。