Vue中computed，methods，watch之间的对比

Vue中computed，methods，watch之间的对比

computed

computed是具有缓存机制的，而且是基于他们的响应式依赖进行缓存，即只在相关响应式依赖发生改变时他们才会重新求值，像下面这种情况只要message不改变，reversedMessage 会立即返回之前的计算结果，只有在message改变的情况下，reversedMessage 才会返回新的计算结果

...
<div>
{{ reversedMessage }}
</div>
...
data() {
 return {
  message: ‘test’
 }
}
computed: {
 reversedMessage () {
  return this.message.reverse()
 }
}
...

methods

methods就没有缓存机制，每当重新触发渲染，调用方法会将函数再一次执行，像下面这种情况，当我点击了reverse按钮，虽然message的值没有改变，但是背地里是将message的值重新reverse了一遍再渲染到浏览器

...
<div>
{{ reversedMessage }}
</div>
...
<div>
{{ message }}
</div>
<button 
@click=”reversedMessage”
>
reverse
</button>
...
data() {
return {
  message: ‘test’
 }
}
methods: {
 reversedMessage () {
  return this.message.reverse()
 }
}
...

watch

watch没有缓存，监听的数据发生变化，会直接触发相应操作，但是支持异步；而computed有缓存，依赖数据发生变化时才会重新计算。所以只有在执行异步或开销较大的操作时，才使用watch，否则用computed

• example 例子