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中取出结果返回,没有设计到计算。

相关推荐
风骏时光牛马4 小时前
AI稳定性治理体系构建与疑难问题深度分析
前端
IT_陈寒4 小时前
JavaScript的this坑人实录,这次我真的记下来了
前端·人工智能·后端
开开心心就好5 小时前
音频降噪剪辑工具,音量裁剪一键处理
运维·服务器·前端·spring·ocr·音视频·1024程序员节
螺丝钉tina7 小时前
[Playwright] [02]常用命令与调试:Debug UI、Mode和 Trace Viewer
开发语言·javascript·测试工具·ui·自动化
PedroQue997 小时前
0.8.2 新增 backFallback 配置,无 tabbar 页返回无忧
前端·uni-app
淡漠的蓝精灵7 小时前
web.py:一个简单到极致的 Python Web 框架
开发语言·前端·python·其他
开开心心就好8 小时前
竖式除法出题工具,整除余数混合模式
运维·服务器·前端·javascript·ocr·perl·1024程序员节
起个名字费劲死了8 小时前
Halcon学习一:骰子识别
前端·python·学习
大江东去浪淘尽千古风流人物8 小时前
【HexVIO】DSP卸载双目惯性VIO:Hexagon向量化前端与单帧融合调度深度解析
前端·状态模式·slam·dsp·vio·hexagon·移动端加速
এ慕ོ冬℘゜8 小时前
JS 事件循环、宏任务微任务:单线程底层原理 + 执行顺序
开发语言·javascript·ecmascript