【vue】vue中的computed和watch的区别

很多人对于computed和watch 是混淆的，实际上 这两者的用途是完全完全不一样的，没必要用长篇大论来解释

computed 用于计算产生新的数据 这个数据是缓存的

watch 是监听现有数据

<template>
  <div> 总共 {
   
   {sum}}</div>
</template>

<script>
export default {
    data() {
        return {
            name:'zhangsan',
            countA:2,
            countB:8
        }
    },
    watch: {
        name(newValue, oldValue) {
            console.log('watch name', newValue, oldValue)
        }
    },
    computed: {
        sum() {
            // 有缓存
            return this.countA + this.countB
        }
    },
    methods: {
        getSum() {
            // 无缓存
            return this.countA + this.countB
        }
    },
}
</script>

【注意】 使用computed 还可以实现对项目的优化 因为computed是有缓存的，上面的例子来说 只要countA和countB的数值没有变化 就不会每次重新计算sum的值