yyman001 / blog

日常疑问记录解答
5 stars 0 forks source link

vue watch #41

Open yyman001 opened 6 years ago

yyman001 commented 6 years ago

api:https://cn.vuejs.org/v2/api/index.html#watch 正常默认写法的watch 只会监听到绑定对象,对象里面属性不会被监听

let test = {
  name:'我是第一层对象属性'
  props:{
   name:'我是第二层属性'
  }
}

// watch
watch :{
   // 如果不调用this,可以使用 箭头函数,如果要使用this
   //请勿使用箭头函数,普通函数和箭头函数返回的this是不一样的
test :function (val,oldVal) {
   console.log(val,oldVal)
   }
}

多数情况我们是这样监听对象, 改变属性

// 整改对象改变,能监听
this.test = {}

// 无效
this.test.name = 'x'

需要深度监听对象属性值,需要改变写法

    watch: {
      test : {
        // handler 事件句柄
        handler: (val, oldVal) => {

        },
     // 深度箭头对象属性
        deep: true
      }
}