vue3＜script setup＞中computed
在 Vue 3 中，<script setup> 语法糖是 Composition API 的一种简化写法，它允许你更简洁地编写组件逻辑。在 <script setup> 中使用 computed 与在普通 <script> 标签中使用 Composition API 的方式类似，但通常我们会借助 import { computed } from 'vue' 来引入 computed 函数。
以下是一个在 <script setup> 中使用 computed 的例子：
<template>
<div>
<p>原始值: {{ count }}</p>
<p>计算后的值: {{ doubled }}</p>
<button @click="increment">增加</button>
</div>
</template>
<script setup>
import { ref, computed } from 'vue';
// 创建一个响应式的引用
const count = ref(0);
// 使用 computed 创建一个计算属性
const doubled = computed(() => {
return count.value * 2;
});
// 定义一个方法来修改 count 的值
function increment() {
count.value++;
}
</script>在这个例子中，count 是一个响应式的引用，它的值可以被修改。doubled 是一个计算属性，它基于 count 的值动态计算并返回一个新的值。每当 count 的值发生变化时，doubled 也会自动更新以反映这一变化。
注意几个关键点：
- 引入
computed：你需要从vue包中显式地引入computed函数。 - 响应式引用：
count是一个通过ref创建的响应式引用。在computed函数内部，你需要通过.value访问它的值。 - 计算属性的定义：
computed接受一个函数作为参数，这个函数返回计算后的值。这个函数会在其依赖的响应式数据变化时自动重新执行。 - 模板中的使用：在模板中，你可以像使用普通数据属性一样使用计算属性
doubled。Vue 会自动处理其依赖跟踪和更新。
<script setup> 语法让组件的编写更加简洁和直观，特别是在使用 Composition API 时。它减少了模板引用 (this) 的使用，使得逻辑更加模块化。
vue计算属性-CSDN博客