vue computed和watch的一些简单理解

今天看到一个问题，就是 vue 的 computed 和 watch 要在哪些场景下使用，其实也就是在问他们的区别。computed 也就是计算属性，它可以帮助我们将在模板中的一些稍微复杂的逻辑计算放回到js代码中，方便理解与修改维护；就拿官网给的例子，如下代码片段

<div id="example">
  {{ message.split('').reverse().join('') + number }}
</div>

这js片段虽然看起来挺简单的，但是，如果以后多了需求，要做多一两步的逻辑，在模板里面维护起来就麻烦了，所以类似这种的，我们将其写到 computed 计算属性里面。也就是下面这样子，这样子看起来美观，一看就清楚这是干啥用的

<template>
  <div>
    <p>{{ reversedMessage }}</p>
  </div>
</template>
 
<script>
export default {
  name: 'test1',
  data () {
    return {
      message: 'hello world',
      number: 1
    }
  },
  computed: {
    // 字符串反转
    reversedMessage () {
      return this.message.split('').reverse().join('') + this.number
    }
  }
}
</script>

在 computed 中定义的每一个计算属性，都会被缓存起来，只有当计算属性里面依赖的一个或多个属性变化了，才会重新计算当前计算属性的值。上面的代码片段中，在 reversedMessage 中，它依赖了 message 和number 这两个属性，一旦其中一个变化了，reversedMessage 会立刻重新计算输出新值。
watch 是属性监听器，一般用来监听属性的变化（也可以用来监听计算属性函数），并做一些逻辑。在这里就稍微说下他监听属性的功能吧。

<template>
  <div>
    <p>{{ this.number }}</p>
  </div>
</template>
 
<script>
export default {
  name: 'test1',
  data () {
    return {
      number: 1
    }
  },
  created () {
      this.number = 100
  },
  watch: {
    number (newVal, oldVal) {
      console.log('number has changed: ', newVal)
    }
  }
}
</script>

上面的代码中，我们在 watch 中监听了 number 属性，并且在实例创建后 number 属性的值的更改。
就我自己目前来说，watch 一般就用来一个数据来影响多个数据的操作，或者比如说是用来监听 input 然后进行一些即时搜索操作什么的。
大概总结一下，computed 和 watch 的使用场景并不一样，computed 的话是通过几个数据的变化，来影响一个数据，而 watch，则是可以一个数据的变化，去影响多个数据。
补充一下：computed 跟 methods 里面的方法的区别，computed 的话访问的时候会直接返回已缓存的结果，而不会像 methods 一样再次计算