前面我们聊了过滤器，也在开头说了vue3不再支持，这里我们就可以用computed计算属性来完全代替，这也是vue3为什么选择抛弃过滤器的原因（为了精简）。

computed计算属性

同样顾名思义，作为国人开发的前端框架确实单词都比较形象，计算属性就是做变量的计算，我们通过计算属性获得计算过后的属性，可以是字符串处理，也是可以数字的运算等等。通过计算属性我们可以简化插值表达式中的数据运算，精简组件结构。

计算属性的特点：分离逻辑、缓存值、双向绑定。

使用computed（简单）

我们给计算属性添加一个具有返回值的函数，这里函数名可以当作变量来调用，即不需要()运算符。

        <div>{{num1}}-{{num2}}-{{sum}}</div>

......
            computed:{
                sum(){
                    return this.num1+this.num2
                }
            }
......

如果我们当作函数执行：sum('1')会报错，计算属性不允许当作函数使用。

展开使用computed

计算属性不仅支持变量的计算结果输出（仅get），还支持第二种写法：同时包含get和set的集合对象。

<div>{{summ}}-{{sum2}}</div>

......
                sum2: {
                    get: function () {
                        return this.summ+1
                    },
                    set: function (v) {
                        this.summ = v*1
                    }
                }
......

第二种写法并不常用，而且你能发现前后两种写法的差异：前者只读，后者可读写；前者是只读函数，后者是包含set方法和get方法的集合对象。

计算属性和方法的重要区别

• 直接差异：

  在插值表达式或v-指令中使用计算属性不加(),而使用方法也可以达到同样的效果。

  计算属性具有依赖缓存机制，当虚拟dom进行变化导致真实dom更新时所有方法被重复执行，但是计算属性会监听直接影响计算返回值的变量，只有该变量产生变化时计算属性才会重新计算，否则读取缓存中的计算结果进行输出。这样减少了消耗，但是容易产生结构性bug。