Vue2/Vue3分别如何使用computed

computed 是 Vue 中用于定义计算属性的功能,它会根据依赖的数据动态计算并缓存结果。Vue 2 和 Vue 3 中的 computed 使用方式有所不同,以下是详细说明:

Vue2中的computed

在 Vue 2 中,computed 是通过选项式 API 实现的,通常在组件的 computed 选项中定义。

【基本用法】

javascript 复制代码
export default {
  data() {
    return {
      firstName: 'Alice',
      lastName: 'Smith',
    };
  },
  computed: {
    // 计算属性:全名
    fullName() {
      return this.firstName + ' ' + this.lastName;
    },
  },
};

Vue3中的computed

在 Vue 3 中,computed 是通过 Composition API 实现的,使用 computed 函数来定义计算属性。

javascript 复制代码
import { ref, computed } from 'vue';

export default {
  setup() {
    const firstName = ref('Alice');
    const lastName = ref('Smith');

    // 计算属性:全名
    const fullName = computed(() => {
      return firstName.value + ' ' + lastName.value;
    });

    return {
      firstName,
      lastName,
      fullName,
    };
  },
};
相关推荐
Cory.眼10 分钟前
WebRTC入门指南:实时通信零基础
javascript·webrtc·实时通信
前端架构师-老李34 分钟前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
一只学java的小汉堡43 分钟前
HTML 01入门:从概念到开发环境搭建与页面头部配置
前端·css·html
拖拉斯旋风1 小时前
📚 JavaScript 变量声明三剑客:`var`、`let`、`const` 学习笔记
javascript
用户21496515898751 小时前
从零搭建uniapp环境-记录
前端
可触的未来,发芽的智生3 小时前
追根索源:换不同的词嵌入(词向量生成方式不同,但词与词关系接近),会出现什么结果?
javascript·人工智能·python·神经网络·自然语言处理
努力写代码的熊大3 小时前
stack、queue与priority_queue的用法解析与模拟实现
java·前端·javascript
im_AMBER3 小时前
React 06
前端·javascript·笔记·学习·react.js·前端框架
wyzqhhhh3 小时前
前端常见的设计模式
前端·设计模式
IT_陈寒3 小时前
React 19重磅前瞻:10个性能优化技巧让你少写30%的useEffect代码
前端·人工智能·后端