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

谁践踏了优雅 2021-07-25 02:55 315阅读 0赞

**目录**

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 () {
            console.log(this.$store.state.test,'asfas fas fas')
          }
        }