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,
    };
  },
};
相关推荐
小小小小宇21 分钟前
虚拟列表兼容老DOM操作
前端
悦悦子a啊23 分钟前
Python之--基本知识
开发语言·前端·python
安全系统学习1 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖2 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖2 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水2 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐2 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06272 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台3 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121383 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css