vue watch 的简单使用

在项目开发中遇到的需求，这点写第一个dome

监听父组件传过来的值发送变化

在子组件中

<template>

　　<div class="components">{{mes}}</div>

</template>

<script> export default { props:['message'],//父组件传过来的值 data(){ return{ mes:1 } }, watch:{ //最广泛的用法，当传过来的message变化时才会去监听并执行
    // newval 新值
    // odlval 旧的值
    // message(newval,odlval){
    // this.mes = newval
    // },



    // 若是想让值在最初的时候就执行，须要用到一下两个属性'handler'，'immediate'
    // 表明在wacth里声明了message这个方法以后当即先去执行handler方法，若是设置了false，那么效果和上边例子同样
 message:{ handler(newval,oldval){ this.mes = newval }, immediate:true//第一次进来就开始监视，而不是等到下次数据改变了才执行
 } } } </script>

 监听data里面的状态发生变化

1 watch:{
2  amends(newval,odlval){ //amends是data里面的定义的状态，红色处不用加this，其余写法参考上面的 3          //处理逻辑4      }
5  }

 监听对象的改变

//普通的watch方法没法监听到对象内部属性的改变，只有data中的数据才可以监听到变化，此时就须要deep属性对对象进行深度监听。

每一个属性变化都会执行
watch: {
    amends: {
      handler(newName, oldName) {
      // ...
    },
    deep: true,//设置为true能够监听对象
    immediate: true
    }
  } 

监听对象里面的属性

监听指定的属性
watch: {
    'amends.name': {
      handler(newName, oldName) {
      // ...
      },
      deep: true,
      immediate: true
    }
  }