vue3——笔记2(计算属性，类与样式绑定)

计算属性

在 Vue3 中，计算属性的用法和 Vue2 基本上是一样的，但是在性能上有了一些改进。Vue3 中计算属性是通过computed函数来创建的，计算属性的值会在相关依赖发生改变时自动更新。与 Vue2 相比，Vue3 的计算属性在一些场景下会更高效和更灵活。

<template><div><p>{{ fullName }}</p><p>{{ reversedMessage }}</p></div>
</template><script>
import { computed } from 'vue';export default {data() {return {firstName: 'John',lastName: 'Doe',message: 'Hello Vue3!'};},computed: {fullName() {return this.firstName + ' ' + this.lastName;},reversedMessage() {return this.message.split('').reverse().join('');}}
};
</script>

在这个示例中，我们定义了两个计算属性fullName和reversedMessage，分别用来计算全名和翻转消息。当firstName、lastName或message发生改变时，这两个计算属性的值会自动更新。

与 Vue2 相比，Vue3 中的计算属性使用了函数的形式进行定义，而不再使用对象的形式。这样可以更清晰地区分出数据和计算属性的逻辑，使得代码更易读、更易维护。此外，由于 Vue3 在响应性系统上进行了优化，计算属性的性能有了一定的提升。

总的来说，Vue3 的计算属性在用法和功能上与 Vue2 基本一致，但在一些细节上有了优化和改进，使得开发者在使用计算属性时更加方便和高效。

使用计算属性来描述依赖响应式状态的复杂逻辑

computed 接收一个getter函数，返回值为一个计算属性 ref 计算属性在模板中会自动解包

会自动追踪响应式依赖当条件改变时依赖于条件的绑定也会同步更新

计算属性 vs 方法

计算属性仅会在依赖更新时才会更新方法调用即更新

可写计算属性

计算属性默认是只读的，要修改通过 getter 和 setter 来创建 get返回值 set 改值不要在getter 中

做异步请求和更改dom

类与样式绑定

Vue3 中，可以通过v-bind:class指令或:class简写来动态绑定元素的类名，以实现灵活的样式控制。同时，也可以使用v-bind:style指令或:style简写来动态绑定元素的内联样式。

以下是一个简单的示例代码，演示了在 Vue3 中如何动态绑定类名和样式：

<template><div><div :class="{ active: isActive, 'text-danger': isError }" :style="{ color: textColor, fontSize: textSize + 'px' }" >Dynamic class and style</div></div>
</template><script>
export default {data() {return {isActive: true,isError: false,textColor: 'red',textSize: 20};}
};
</script>

在这个示例中，我们通过:class绑定了一个对象，根据isActive和isError的值来动态添加类名active和text-danger，从而控制元素的样式。同时，通过:style来绑定了一个对象，根据textColor和textSize的值来动态设置元素的文本颜色和字体大小。

通过类与样式绑定的方法，我们可以根据数据的变化来动态更新元素的样式，实现更加灵活和可维护的前端界面设计。Vue3 的类与样式绑定功能与 Vue2 相比基本一致，但在性能和响应性方面有了一定的优化和改进。