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 () {
    setTimeout(() => {
      this.number = 100
    }, 2000)
  },
  watch: {
    number (newVal, oldVal) {
      console.log('number has changed: ', newVal)
    }
  }
}
</script>

上面的代码中，我们在watch中监听了number属性，并且在实例创建后2s执行对number属性的值的更改。我们可以在控制台中看到2s后打印了如下图：

就我自己目前来说，watch一般就用来一个数据来影响多个数据的操作，或者比如说是用来监听input然后进行一些即时搜索操作什么的。

大概总结一下，computed和watch的使用场景并不一样，computed的话是通过几个数据的变化，来影响一个数据，而watch，则是可以一个数据的变化，去影响多个数据。