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后打印了如下图：