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 等钩子 | 可以直接使用生命周期钩子 |