光脚丫思考Vue3与实战：第05章计算属性和侦听器第03节计算属性的其他玩法

本文链接：https://blog.csdn.net/GJYSK/article/details/117373657

下面是本文的屏幕录像的在线视频：

温馨提示：

1、视频下载：线上视频被压缩处理，可以下载高清版本：

链接：https://pan.baidu.com/s/1h600_BRR9O2Lr87zVQNgEw 提取码：dgpu

2、示例代码：https://pan.baidu.com/s/1rCqbY_j35FcRWRZbuOfHqg 提取码：79kh

下图是文章大纲：

一、概述

本篇文章介绍了Vue.js 3.x的计算属性的一些其他玩法，具体包括：依赖其他计算属性、依赖其他实例的数据、动态的设置样式。

二、依赖其他计算属性

计算属性可以依赖其他计算属性。如下示例代码所示：

示例代码：07-Dependency1.html
上述代码声明了2个计算属性：fullName和message，其中，计算属性message依赖于计算属性fullName，因此，当fullName的数据改变之后，message的数据也会同步做响应式改变。而计算属性fullName又依赖于普通数据项firstName和lastName，因此，当firstName和lastName任何一个数据项发生改变之后，fullName就会同步改变，而同时message也会实时同步，界面上显示的内容也会同步更新。

三、依赖其他实例的数据

计算属性不仅可以依赖当前Vue实例的数据，还可以依赖其他Vue实例的数据，例如下面的代码：

示例代码：08-Dependency2.html
这里我们创建了两个Vue实例vm1和vm2，在vm2的计算属性reversedMessage中，依赖的是vm1的数据message，所以当message变化时，实例vm2的计算属性也会变化。这样的用法在在多人协同开发时很常用，因为你写的一个组件所用得到的数据需要依赖他人的组件提供。后续的相关章节中我们详细沟通。

四、设置样式

用于动态地设置元素的样式名称class和内联样式style。如下代码所示：

示例代码：09-CssStyle.html
上面的代码中，类名active依赖于数据isActive，当其为true时，div会拥有类名active，为false时则没有。类名error则依赖于isError数据项，为true是，div会添加类名error，否则就没有。因此，上例最终渲染完的结果是：

总结：
1、:class内的表达式每项为真时，对应的类名就会加载。
2、:class可以与普通class共存。
3、当:class的表达式过长或逻辑复杂时，还可以绑定一个计算属性。
4、也可以直接绑定一个Object类型的数据，或者使用类似计算属性的methods。
5、当绑定的数据项发生改变的时候，关联的样式也会响应式的改变。