Vue watch监听的三种形式

目录

一、直接监听直属变量（非对象）

二、监听整个对象 

 三、监听对象中的某个特定属性

---

全局注意：以响应式的方式触发才会被监听到

一、直接监听直属变量（非对象）

如图中aIndex这种，

监听方法 以下效果相同，如果不需要参数可以不写

//watch中声明
aIndex: 'aIndexChange'
//method方法
function aIndexChange(newval,oldval){
    //操作
}

aIndex: function(newval.oldval) {
          //操作
},

aIndex(newval, oldval) {
      // 操作
}

二、监听整个对象 

如图中这种

需要监听对象相关所有属性是否变化的，则需要使用deep属性对进行深度监听 ，

只要内容中任何属性变化都会进入监听方法

dealInfo: {
    handler(newval, oldval) {
      // ...
    },
    //深监听，必须写，否则监听无效
    deep: true,
    immediate: true
    //可选 是否变量首次赋值时，就进行交监听，
    //默认是改变时（也就是复制完毕后第一次更改）才执行监听方法内容
}

 三、监听对象中的某个特定属性

依旧使用二中的对象为例 dealInfo,假设监听name属性,以下效果以及意义相同

'dealInfo.name': {
    handler(newval, oldval) {
       // 操作
    }
 }

'dealInfo.name': function(){
     // 操作
 }

//利用computed获取变化的值
computed: {
　　changeVal() {
       //需要监听的属性
　　　　return this.dealIndo.name
　　}
},
watch: {
　　changeVal(newVal, oldVal) {
　　　　//操作
　　}
}