Vue中watch的简单应用

computed 和 watch

　　1、computed 有缓存，data 不变择不会重新计算

　　2、watch的深度监听(监听引用类型)

　　3、watch 监听引用类型，拿不到oldVal

一、watch的普通监听

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

 <el-input v-model="demo"></el-input>
{{value}}

 export default {
    data() {
      　return {
        　　demo: '',
        　　value: ''
      　};
    },
    watch: {
      　demo(val) {
        　　this.value = this.demo;
      　}
    }
 }

　　上面这个就浅显易懂了，通过watch来直接监测demo，如果demo的值变化，value的值也会跟着一起变化。

二、如果watch监测的是一个对象的话，直接使用watch是不行的，此时我们可以借助于computed计算属性来完成。

 <el-input v-model="demo.name"></el-input>
{{value}}


export default {
    data() {
      　return {
        　　demo: {
          　　　　name: ''
        　　},
       　　 value: ''
      　};
    },
    computed: {
      　　newName() {
        　　　　return this.demo.name;
      　　}
    },
    watch: {
      　　newName(val) {
        　　　　this.value = val;
      　　}
    }
}

　　三、深度监听

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

　　简单的说就是

data() {
        return {
            name: '城市',
            info: {
                city: '杭州'
            }
        }
    },
    watch: {
        // 普通监听
        name(oldVal, val){
            console.log(oldVal)
        },
        info: {
            // 监听引用类型必须使用 handler 函数
            handler(oldVal, val){
                // 引用类型监听不到 oldval的，因为指针已经只像了相同的值
                console.log(oldVal)
            },
            deep: true  // 深度监听
        }
    }

 

数组的变化，不需要深度watch。