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,
    };
  },
};
相关推荐
yinuo8 分钟前
uniapp微信小程序安卓手机Touchend事件无法触发
前端
你的人类朋友2 小时前
【Node】Node.js 多进程与多线程:Cluster 与 Worker Threads 入门
前端·后端·node.js
闲人编程2 小时前
使用Celery处理Python Web应用中的异步任务
开发语言·前端·python·web·异步·celery
excel2 小时前
前端读取文件夹并通过 SSH 上传:完整实现方案 ✅
前端
一只游鱼2 小时前
vue+springboot项目部署到服务器
服务器·vue.js·spring boot·部署
谢尔登2 小时前
【Nest】日志记录
javascript·中间件·node.js
双向333 小时前
【征文计划】基于Rokid CXR-M SDK 打造AI 实时会议助手:从连接到自定义界面的完整实践
前端
Lei活在当下3 小时前
【业务场景架构实战】6. 从业务痛点到通用能力:Android 优先级分页加载器设计
前端·后端·架构
你的人类朋友3 小时前
什么是基础设施中间件
前端·后端
知识分享小能手3 小时前
微信小程序入门学习教程,从入门到精通,WXML(WeiXin Markup Language)语法基础(8)
前端·学习·react.js·微信小程序·小程序·vue·个人开发