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,
    };
  },
};
相关推荐
灵感__idea3 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴4 小时前
Mix
前端·webgl
代码续发5 小时前
前端组件梳理
前端
试图让你心动5 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_5 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码6 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记6 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏6 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数6 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante7 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端