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博客

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值