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 也会自动更新以反映这一变化。

注意几个关键点：

1. 引入 computed：你需要从 vue 包中显式地引入 computed 函数。
2. 响应式引用：count 是一个通过 ref 创建的响应式引用。在 computed 函数内部，你需要通过 .value 访问它的值。
3. 计算属性的定义：computed 接受一个函数作为参数，这个函数返回计算后的值。这个函数会在其依赖的响应式数据变化时自动重新执行。
4. 模板中的使用：在模板中，你可以像使用普通数据属性一样使用计算属性 doubled。Vue 会自动处理其依赖跟踪和更新。

<script setup> 语法让组件的编写更加简洁和直观，特别是在使用 Composition API 时。它减少了模板引用 (this) 的使用，使得逻辑更加模块化。

vue计算属性-CSDN博客