vue如何做到计算属性传参?

1.计算属性传参,还在return一个函数?

复制代码
let nameFull = computed(() => {
    return e => {
        console.log('参数', e)
    }
})

那这样的话,干脆直接写一个函数

2.真正的计算属性传参,借助map实现

复制代码
import { computed } from "vue";
export function zlcComputed(fn) {
  const map = new Map();
  return function (...args) {
    const key = JSON.stringify(args);
    if (map.has(key)) {
      return map.get(key);
    }
    const res = computed(() => {
      return fn(...args);
    });
    map.set(key, res);
    return res;
  };
}

<template>
  <div class="hello">{{ firstName("章") }}</div>
  <div class="hello">{{ firstName("龙") }}</div>
</template>

<script setup>
import { zlcComputed } from "@/utils/zlcComputed";
let firstName = zlcComputed((data) => {
  return data;
});
</script>

<style scoped>

</style>

3.有些人会有疑问,还不是每次都会走zlcComputed中return出来的函数?没错,但是万一设计到复杂的好性能的计算呢?如果使用步骤一的方法return一个函数,每次都会重新运行,而使用这种方式直接从map中取出结果返回,没有设计到计算。

相关推荐
小小小小宇19 小时前
H5 嵌入微信 / 支付宝 / 抖音小程序 WebView:调用原生能力完整方案
前端
卷帘依旧19 小时前
React中父子组件生命周期的执行顺序
前端
绝世唐门三哥19 小时前
ES6 --- import/export 全解析
开发语言·前端·javascript
小杍随笔19 小时前
【iNovel 前端架构深度解析:基于 Vue 3 + TypeScript + Tauri 的跨端小说写作工具】
前端·架构·typescript
yqcoder19 小时前
JavaScript 异步基石:Promise 完全指南
开发语言·前端·javascript
深度先生19 小时前
Windows 踩坑实录:better-sqlite3 安装、编译、打包报错彻底解决
前端
胡志辉19 小时前
Nginx CVE‑2026‑42945:隐藏18年高危漏洞被曝光(附解决方案)
前端·后端·nginx
代码煮茶19 小时前
Vue3 上传组件实战 | 从 0 封装大文件分片上传组件(断点续传 / 秒传 / 进度条)
javascript·vue.js
Csvn19 小时前
Vue 性能优化实战指南
前端·vue.js
UXbot19 小时前
AI原型设计工具如何从PRD自动生成交互原型
前端·低代码·ui·交互·ai编程·原型模式