VUE 2.X 工程各种监听大全

目录

VUE 2.X 工程监听使用大全（监听使用+监听本身的属性介绍）

一、监听string属性值的变化

二、监听object对象

三、监听路由

四、监听本身的属性

4.1 immediate属性

4.2 deep属性

五、监听vuex中值的变化

---

VUE 2.X 工程监听使用大全（监听使用+监听本身的属性介绍）

vue项目工程中，很多时候需要我们监听各种值的变化，一般监听的使用形式如下：

watch:{
//需要监听的代码
}

一、监听string属性值的变化

属性的监听，需要先在data里面定义，然后才能被监听到。具体的使用如下：

 data: {
    firstName: 'Dawei',    //先data里面定义
    
  },
  watch: {
    firstName(newName, oldName) {
      this.fullName = newName;               //监听属性
    },
//第二种写法，推荐这种写法，因为需要用到监听自身的一些属性时候，只能用这种写法
    firstName: {
        handler(newName, oldName) {
            this.fullName = newName ;
        },
    }

  } 

二、监听object对象

对象的监听，类似于string 的监听，但是如果需要监听对象下面的某个属性值的话，需要加deep属性，可以见4.2详细介绍

data: {
    obj: {
      a: 123,
      b:'abc'
    }
  },
  watch: {
    obj: {
      handler(newName, oldName) {
         console.log('obj.a changed');
      },
      deep: true
    }

改进：

上述方法会对性能造成很大的浪费，obj里面任何一个属性的改变了都会触发一次，可以进行优化，用字符串的形式进行监听：

watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    // deep: true  //字符串监听可以不用deep
  }
} 

三、监听路由

路由的监听如下：

watch: {
    '$route'(to,from){
      console.log(to);   //to表示去往的界面
      console.log(from); //from表示来自于哪个界面
      if(to.path=="/shop/detail"){
        console.log("商品详情");
      }
    }
  },

四、监听本身的属性

4.1 immediate属性

    立即执行的意思。watch 的一个特点是，最初绑定的时候是不会执行的，要等到 值改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办呢？我们需要给监听加一个immediate属性，具体写法如下：

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName ;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
    immediate: true
  }
}

4.2 deep属性

     监听对象时候，需要加上deep属性。deep属性默认是false，代表是否深度监听。deep的意思是深入观察，监听会往下一层层的遍历，会监听对象所有的属性。

    这种做法的性能开销会比较大，任何修改obj的属性都会触发这个监听。

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
} 

五、监听vuex中值的变化

    vuex监听一般需要copmuted和watch的结合，computed计算vuex中的值，watch负责监听。以下为参考写法，因为vuex的写法很多，大体思路如下：

computed: {
      getStoreItem () {
        return this.$store.state.test
      }
    },
    watch: {
      getStoreItem (nval, oval) {
        console.log(this.$store.state.test,'asfas fas fas')
      }
       //写法2 
     getStoreItem: {
      handler(nval, oval) {
        console.log(nval, oval);//nval改变后的新数据，oval改变前的旧数据
      },
      deep: true, // 深度监听
      immediate: true,//立即执行
    },
    }