Vue 中的 computed 属性用于定义计算属性，这些属性默认缓存会根据其他数据属性的变化自动更新，即惰性求值。computed 属性有两种模式：只读和可读写。
一、只读 computed 属性
只读 computed 属性是最常见的用法，它只能用于获取值，不能设置值。这种属性通常用于依赖其他数据属性进行计算。
// vue2写法
export default {data() {return {firstName: 'John',lastName: 'Doe'};},computed: {fullName() {return `${this.firstName} ${this.lastName}`;}}
};// vue3 API的写法
<template><div><p>Full Name: {{ fullName }}</p></div>
</template><script setup>
import { ref, computed } from 'vue';const firstName = ref('John');
const lastName = ref('Doe');const fullName = computed(() => {return `${firstName.value} ${lastName.value}`;
});
</script>// vue3 使用setup 函数写法
<template><div><p>Full Name: {{ fullName }}</p></div>
</template><script>
import { ref, computed } from 'vue';export default {setup() {const firstName = ref('John');const lastName = ref('Doe');const fullName = computed(() => {return `${firstName.value} ${lastName.value}`;});return {fullName};}
};
</script>二、可读写 computed 属性
可读写 computed 属性不仅可以在获取值时进行计算，还可以在设置值时执行特定的操作。这种属性通常用于双向绑定或复杂的逻辑处理。
// vue2写法
export default {data() {return {firstName: 'John',lastName: 'Doe'};},computed: {fullName: {get() {return `${this.firstName} ${this.lastName}`;},set(newValue) {const names = newValue.split(' ');this.firstName = names[0];this.lastName = names[1];}}}
};// vue2写法
<template><div><input v-model="fullName" placeholder="Full Name"></div>
</template><script>
export default {data() {return {firstName: 'John',lastName: 'Doe'};},computed: {fullName: {get() {return `${this.firstName} ${this.lastName}`;},set(newValue) {const names = newValue.split(' ');this.firstName = names[0];this.lastName = names[1];}}}
};
</script>// vue3 API的写法
<template><div><input v-model="fullName" placeholder="Full Name"></div>
</template><script setup>
import { ref, computed } from 'vue';const firstName = ref('John');
const lastName = ref('Doe');const fullName = computed({get() {return `${firstName.value} ${lastName.value}`;},set(newValue) {const names = newValue.split(' ');firstName.value = names[0];lastName.value = names[1];}
});
</script>
总结
- 只读
computed属性：用于简单的计算，不能被赋值。 - 可读写
computed属性：既可用于计算，也可用于设置值，适用于更复杂的逻辑处理。
课题外学习
watch与computed的区别共同点：可以监听数据的变化
不同点：
computed：用于声明式地定义数据派生的状态。计算属性会自动缓存结果，只有在其依赖的数据发生变化时才会重新计算。watch：用于执行异步操作或开销较大的操作。watch不会缓存结果，每次数据变化都会触发回调函数。
Vue 3 的组合式 API 写法与Vue 3 的setup 函数 写法的区别
<script setup> 语法（推荐）
<script setup> 是 Vue 3 提供的一种更简洁、更直观的方式来编写组合式 API 代码。它允许你在 <script> 标签中直接使用组合式 API 的功能，而不需要显式地调用 setup 函数。
特点
- 简洁性: 代码更加简洁，减少了样板代码。
- 自动暴露: 在
<script setup>中定义的所有变量和函数都会自动暴露给模板使用，无需手动返回。 - 编译优化: Vue 编译器会对
<script setup>进行优化，提高性能。
setup 函数
setup 函数是组合式 API 的核心部分，它在组件实例创建之前执行，用于初始化响应式数据、计算属性、方法等。
特点
- 灵活性: 提供更大的灵活性，适合复杂的逻辑和高级用法。
- 显式返回: 所有要在模板中使用的变量和函数都需要显式地返回。
- 生命周期钩子: 可以直接在
setup函数中使用生命周期钩子。
总结
| 特征 | <script setup> 语法 | setup 函数 |
| 简洁性 | 非常简洁，减少样板代码 | 相对冗长，需要显式返回 |
| 自动暴露 | 定义的所有变量和函数自动暴露给模板 | 需要显式返回所有要在模板中使用的变量和函数 |
| 编译优化 | Vue 编译器进行优化，性能更好 | 没有特殊的编译优化 |
| 灵活性 | 适用于大多数常见场景 | 更适合复杂的逻辑和高级用法 |
| 生命周期钩子 | 可以使用 onMounted, onUnmounted 等钩子 | 可以直接使用生命周期钩子 |
