vue2.0之监听属性的使用心得及搭配计算属性的使用

Posted 2020-12-05 hanqingtao

---

我们在工作中常常需要监听某一个属性值的变化，这个时候我们就需要用到了监听属性watch，在这里我总结watch属性的三种场景使用希望对你有所帮助：

1.基础版监听：

场景如下：输入框输入你的年龄，如果年龄在0-15岁提示信息：你还是个小孩，如果年龄在 15-25岁，提示信息：你已经是个少年，如果年龄在25岁以上，提示信息：你已经长大了。根据需求配合监听属性我们得到下面的代码：

<template>
  <div id="app">
    年齡：<input type="number" v-model="age"><br>
    提示信息：<span>{{infoMsg}}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      infoMsg:""
    }
  },
  watch:{
    age:function(val,oldval){
      if(val>0 && val<15){
        this.infoMsg="你还是个小孩"
      }else if(val>15 && val<25){
        this.infoMsg="你已经是个少年"
      }else{
        this.infoMsg="你已经长大了"
      }
    }
  }
}
</script>

这里需要特别说明一下的是：坚挺属性方法中的两个参数分别代表的含义：第一个val是当面正在监听的属性的值，oldval是属性改变之前的值，由于这是形参的原因，参数的名字可以自己定义，但是但是参数所代表的含义是不会变化的。

2.进阶版监听：

下面我们改变一下需求：基础规则不变，但是因为后台数据库的更改（画个圈圈咀咒他）我们需要提交一个这样的数据结构

 data() {
    return {
      info: {
        age: ""
      },
      infoMsg: ""
    };
  },

由于我们监听的是对象info中的属性age值的变化，所以我们需要使用到的是深度监听，具体代码如下：

<template>
  <div id="app">
    年齡：<input type="number" v-model="info.age"><br>
    提示信息：<span>{{infoMsg}}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        age: ""
      },
      infoMsg: ""
    };
  },
  watch: {
    info: {
      handler: function(val, oldval) {
        var that = this;
        if (val.age > 0 && val.age < 15) {
          that.infoMsg = "你还是个小孩";
        } else if (val.age > 15 && val.age < 25) {
          that.infoMsg = "你已经是个少年";
        } else {
          that.infoMsg = "你已经长大了";
        }
      },
      deep: true
    }
  }
};
</script>

在这里需要注意的有两点：1，这里的function不能使用箭头函数替代，如果使用箭头函数的话，this的指向会是全局。2，你会注意到这里多加入一个属性是deep，它的含义表示是否开启深度监听，如果开启值为true，反之为false。

3.最高级监听：

针对第二个案例不知道你有没有发现一个问题：我们监听的是一个对象里面某个属性的变化，但是如果当这个对象里面有很多个值的时候，虽然也可以使用第二种方法进行监听，但是这将会是对资源的一种极大的浪费，身为一个严谨的程序员（微笑脸），绝对不能允许这样的事情发生，所以我们可以结合computed（计算属性）对上面的代码进行优化：

<template>
  <div id="app">
    年齡：<input type="number" v-model="info.age"><br>
    提示信息：<span>{{infoMsg}}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        age: "",
        name: "",
        hobit: ""
      },
      infoMsg: ""
    };
  },
  computed: {
    ageval: function() {
      return this.info.age;
    }
  },
  watch: {
    ageval: {
      handler: function(val, oldval) {
        var that = this;
        if (val > 0 && val < 15) {
          that.infoMsg = "你还是个小孩";
        } else if (val > 15 && val < 25) {
          that.infoMsg = "你已经是个少年";
        } else {
          that.infoMsg = "你已经长大了";
        }
      },
      deep: true
    }
  }
};
</script>

通过上面的我们看出，这次我们监听的是计算属性ageval，而计算属性返回的则是info对象中age的值，与第二次的代码进行比较我们可以发现两次代码中监听的一个是对象info，一个是info对象中age的值，性能大大增强，这就是我们期待的结果了。