Vue中的计算属性 Computed

计算属性 Computed

:::warning 注意
阅读本章内容之前必须先了解什么是 getter 、setter。 必须知道模板语法以及过滤器的使用。
:::

小伙伴们应该都知道选项 data 里面可以用来定义一些数据，也可以通过 props 接收父组件传进来的数据，props 接收进来的数据是不能进行修改的，这里在明确声明一下。当我们想对展示的数据进行修改，可以通过过滤器的方式，之前的文章有介绍过了，还可以通过表达式来修改，因为模板语法支持表达式。下面进行代码回顾一下，之前验证过了，这里就不验证了。

基础案例

模板语法表达式

模板语法的表达式设计初衷是用于简单的数据运算，不适合太多复杂逻辑的运算。

过滤器

过滤器其实就还好，内部使用复杂一点的运算逻辑也影响不大，但是使用场景就有限制，只能在模板语法或者表达式中使用。

计算属性 Computed

所以，对于任何复杂逻辑运算，你都应当使用计算属性 Computed。简单理解就是 Computed 在原来的 data 数据中基础上做了一些处理，处理完后用了一个新的变量进行存储，做的这些处理是不会影响原来的数据值的。并且 Computed 和选项 data 一样，使用的场景非常广泛，凡是能用 this 访问 Vue 实例的地方，都可以访问到 Computed 的数据。

预览效果

不能被修改

因为 Computed 本身可能是基于选项 data 中的数据进行加工处理，可以理解它没有真身，所以无法给它赋值。我们平时在 Computed 编写的代码其实就是 getter 访问器，因为默认就是 getter，没有 setter。如果想要给 Computed 变量赋值，那么就需要给它设置 setter，代表赋值后要做什么事情？接下来进行实践一下。

预览效果

代码中实现了 Computed 的 getter 、setter 写法。页面 dom 渲染完毕 1 秒后，会对 Computed 中的 _price 进行赋值，随即就会触发 setter 函数时，会对 选项 data 的值 this.price 进行修改。最后因为响应式的原理，Computed 的 _price 依赖了 this.price，所以 this.price 更新时，_price 的 getter 会重新进行计算。所以页面会显示出来 103。

原文链接：菜园前端