vue中computed计算属性、watch侦听器、methods方法的区别以及用法

一、定义

1、computed是计算属性，依赖其他属性值，并且computed的值有缓存。只有computed依赖的属性值发生变化，computed的值才会重新计算。
运用场景：一个数据属性在它所依赖的属性发生变化时，也要发生变化。对于任何复杂逻辑，你都应当使用计算属性。

2、watch侦听器没有缓存性，起到观察的作用，即监听数据的变化。watch为一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。
运用场景：侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化，即一个数据影响别的多个数据。

3、methods选项中的定义的函数称为方法，在Vue实例化的过程中，methods对象中的方法将被混入到Vue实例中，成为Vue实例的方法。可以直接通过Vue实例访问这些方法。需要主动调用methods中的函数才能执行。

二、computed计算属性

1、使用方法和data中的数据一样，但是类似一个执行方法
2、在调用时候不加()
3、必须有return返回
4、如果函数所依赖的属性没有发生变化，从缓存中读取

示例

<template>
  <div class="about">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
  </div>
</template>
<script>
export default {
  name: 'About',
  data() {
    return {
      message: 'Hello'
    }
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  },
}
</script>

在以上代码中我们定义了一个计算属性：reverseMessage，其值为一个函数并返回我们需要的结果。之后在模板中就可以像使用message一样使用reverseMessage。

<template>
  <div class="about">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage() }}"</p>
  </div>
</template>
<script>
export default {
  name: 'About',
  data() {
    return {
      message: 'Hello'
    }
  },
  methods:{
    reversedMessage () {
      return this.message.split('').reverse().join('')
    }
  }
}
</script>

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

计算购物车商品总价示例

computed:{
    Total(){
        let price = 0;
        for (let i = 0;i<this.tableData.length;i++) {
            price += this.tableData[i].taxUnitPrice * this.tableData[i].invNum
        }
        this.detailedSend.total = price
        return price;
    },
},

三、watch监听

1、watch的函数名称必须和data中的数据名一致
2、watch中的函数有两个参数，前者是newVal，后者是oldVal
3、watch中的函数是不需要调用的
4、watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变，
例如：object.a变了，object没变。
要深度监听需要配合deep：true属性使用。
5、immediate:true 它表示在第一次渲染的时候是否要执行这个函数

搜索框示例

watch: {
    keyword () {
        const result = []
        this.jsonData.forEach(val => {
            if (val.name.indexOf(this.keyword) > -1) {
                result.push(val.name)
            }
        });
        this.cityList = result
    }
},

四、区别

1、功能：computed是计算属性；watch是监听一个值的变化执行对应的回调
2、是否调用缓存：computed函数所依赖的属性不变的时候会调用缓存；watch每次监听的值发生变化时候都会调用回调
3、是否调用return：computed必须有；watch可以没有
4、使用场景：computed当一个属性受多个属性影响的时候；例如购物车商品结算；watch当一条数据影响多条数据的时候，例如搜索框
5、是否支持异步：computed函数不能有异步；watch可以