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 相比基本一致，但在性能和响应性方面有了一定的优化和改进。

绑定 html class

绑定对象

可以给 :class(v-bind:class 的缩写) 传递一个对象来动态切换class

 <div :class="{ 样式名：对象名} " />

 样式是否存在取决于对象的真假

动态绑定对象式 也可以和一般的绑定对象共存

<div class = "a" :class="{ b:isTrue}"/>

绑定的对象也可以是对象形式

 let obj = {                  <div :class=obj />

 样式1 = 变量

 样式2 = 变量

}

绑定的对象也可以是计算属性返回的变量

绑定数组

声明一个值为你的样式的变量

 let a = ref('样式名1')       <div :class=[a,b] />

 let b = ref('样式名2') 

在组件上使用

在组件上使用样式绑定时，如果组件只有一个元素，绑定在组件上的样式都会到组件唯一元素上

如果有多个元素需要指定那个根元素来接收 使用$attrs 来指定实现