Vue学习笔记三：Computed 和 Watch 的使用方法详解

一、计算属性 Computed

• Computed 用来监控自己定义的变量，该变量不在 data 里面声明，直接在 computed 里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用其他处理；
• Computed 比较适合对多个变量或者对象进行处理后返回一个结果值，也就是多个变量中的某一个值发生变化则我们监控的这个值也就发生变化；
• Computed 计算属性基于响应式依赖进行缓存。如其中的任意一个值未发生变化，它调用的就是上一次计算缓存的数据，因此提高了程序的性能。而 methods 中每调用一次就会重新计算一次，为了进行不必要的资源消耗，选择用计算属性。

<template>
  <div>
    <input type="text" v-model="mytext">
    <ul>
      <li v-for="data in datalistcom" :key="data">
        {{ data }}
      </li>
    </ul>
  </div>
</template>
<script>
export default{
  name: 'TestComputed',
  data(){
    return{
      datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"],
      mytext: ''
    }
  },
  computed:{
    datalistcom(){
      return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
    }
  }
}
</script>

结果是：

搜索之后得出的结果：

二、监听属性 Watch

• Watch 主要用于监控 Vue 实例的变化，它监控的变量必须在 data 里面声明才可以，它可以监控一个变量，也可以是一个对象。
• 计算属性 Computed 初始化的时候就可以被监听到并且计算，但 Watch 是发生改变的时候才会触发。
• 当有一些数据需要随着其他数据变动而变动时，或者当需要在数据变化时执行异步或者开销较大的操作时，可以用 Watch。

<template>
  <div>
    <p>单价：<input type="text" v-model="price"></p>
    <p>数量：<input type="text" v-model="number"></p>
    <p>计算金额：{{sum}}</p>
  </div>
</template>
<script>
export default{
  name: 'TestWatch',
  data(){
    return{
      price: 100,
      number: 0,
      sum: 0
    }
  },
  watch:{
    // 监听的参数的名字要一致
    price(){
      console.log(this.price)
      if(this.price*this.number < 1000 && this.price*this.number > 0){
        this.sum = this.price*this.number
      }else{
        this.sum = this.price*this.number
      }
    },
    number(){
      console.log(this.price)
      if(this.price*this.number < 1000 && this.price*this.number > 0){
        this.sum = this.price*this.number
      }else{
        this.sum = this.price*this.number
      }
    }
  }
}
</script>

结果是：

计算结果：

三、Computed 与 Watch 的区别

• 计算属性变量在 Computed 中定义，属性监听变量在 data 中定义。
• 计算属性是声明式的描述一个值依赖了其他值，依赖的值改变后重新计算结果更新 DOM。属性监听的是定义的变量，当定义的值发生变化时，执行相对应的函数。