vue中watch的用法和小demo

vue中一般会用watch来监测Vue实例上的数据变动。
然后下面是列出的demo，大家可以看一下，针对参考~

1. demo1是基础watch用法，可以直接监听到数值的变化，监测的对象发生变化，那么val的值也会相应发生改变。
2. demo2中如果监测一个对象的话，直接使用watch是不可取的，这个时候使用vue中computed（计算属性）来完成。
3. demo3中如果监测的目标对象除了上述以外，可以使用深度监听的方法（immediate，deep）。

demo1

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

demo2

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

demo3

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

<script type="text/javascript">
  var vm = new Vue( {
    
    
    el: '#app',
    data: {
    
    
      testObj: {
    
    
        name: '靓仔',
        age: 33,
        sex: '女'
      },
      testName:"针不戳"
    },
    watch:{
    
    
      testObj:{
    
    
        handler:function(val,oldval){
    
    
          console.log(val.name)
        },
        immediate:true,
        deep:true//针对于对象内部的属性监听，也叫深度监听
      },
      'testObj.name':function(newVal,oldVal){
    
    //键路径必须加上引号
        console.log(newVal+"test")
      },
      testName(newVal,oldVal){
    
    
        console.log(this.testName)
      }
    },
  } );
  vm.$watch("testName",(val,oldval){
    
    //主动调用$watch方法来进行数据监测
    console.log(val)
  })
</script>
</body>