Vue中监视属性watch

189 阅读1分钟

关于 watch 的数据种类

1、监听data中数据

2、监听computed中的数据

3、监听props中数据

4、监听vuex中的数据(可以先通过计算属性computed来获取vuex中的数据,然后监听computed)

以下为案例(无vuex数据案例)

data中的属性:watch_obj为对象,watch_string为字符串
props属性:count为字符串

new Vue({
  data() {
      watch_obj:{ name:'王八', age:18},
      watch_string:'Y'
  },
  props:[conut],
  computend(){
      getNewName(){ return this.watch_obj.name + '蛋'}
  },
**注意** ---在watch中不要使用箭头函数,因为箭头函数中的this是指向当前作用域
  watch:{
        //1---监听字符串 watch_string 
         watch_string(newVal,oldVal){console.log('监听成功')},
        //2---监听对象 watch_obj
        'watch_obj':{
            handler: function() {
                console.log('监听成功');
            }
            //深度监听,监听对象所有属性,任何一个属性发生变化,都会执行handler这个方法
            deep:true 
            //是否立即执行,--默认初始化不执行
            immediate: true
        },
        //3---监听对象中的某一个属性 watch_obj.name
        'watch_obj.name'(newVal,oldVal){
            console.log('监听成功');
        }  
        //4---监听计算属性
        getNewName(newVal.oldVal){console.log('监听成功')}
        //5---监听props(监听父组件传过来的值)
        conut(newVal.oldVal){console.log('监听成功')}
 }
})