Vue中watch的简单应用

Vue.js 有一个方法 watch，它可以用来监测Vue实例上的数据变动。

如果对应一个对象，键是观察表达式，值是对应回调，值也可以是方法名，或者是对象，包含选项。

下面写两个demo，参考demo来了解一下
demo1
监听变量

<template>
  <div>
    <h1>测试</h1>
    <el-input v-model="value"></el-input>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },


  watch: {
    value(newdata ,olddata) {
   console.log(newdata ,olddata);
    },
  },
  
};
</script>

例子中，一个input 修改value， 一个配置项watch, 里面是个方法，方法名字是data中的要监控的变量的键名。 这样就配置好了。 触发方式就是value的值，变化，就会触发watch中名字叫value的方法。 回调函数中，接受两个变量。 分别是修改前，和修改后的值。

demo2

监听对象

<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计算属性来完成。

demo3

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

嗯，就酱~