首页 > 其他分享 >vue中引用utils中的方法

vue中引用utils中的方法

时间:2023-12-05 18:02:06浏览次数:26  
标签:vue utils deepClone substance 引用 key 拷贝 result

utils中的目录解构如下(utils在src目录下),以深拷贝为例:

vue中引用utils中的方法_数据

deepClone文件的代码如下:

 function deepClone(substance) {
  if (typeof substance !== 'object' || substance == null) {
    return substance;
  }
  const result = Array.isArray(substance) ? [] : {};
  for (const key in substance) {
    if (Object.prototype.hasOwnProperty.call(substance, key)) {
      if (typeof substance[key] === 'object' && substance[key] !== null) {
        result[key] = deepClone(substance[key]);
      } else {
        result[key] = substance[key];
      }
    }
  }
  return result;
}
export { deepClone }

在需要引入的vue文件中导入:

import {deepClone} from '@/utils/deepClone'

在需要使用的地方直接引用,不需要加this.

//this.list 为深拷贝的数据,obtainList为深拷贝后的值
let obtainList = deepClone(this.list)

标签:vue,utils,deepClone,substance,引用,key,拷贝,result
From: https://blog.51cto.com/u_16372215/8694774

相关文章

  • 计算机毕业设计springcloud vue商城源码
    开发环境及工具:大等于jdk1.8,大于mysql5.5,idea(eclipse),nodejs,vscode(webstorm)技术说明:springcloudspringbootmybatisvueelementui代码注释齐全,没有多余代码,适合学习(毕设),二次开发,包含论文技术相关文档。功能介绍:用户端:登录注册首页显示搜索商品,轮播图,商品分类,点击分类展示对应商,(......
  • 解决vue-django配置问题
    后端跨域问题django安装pipinstalldjango-cors-headers添加应用,主应用下的settingINSTALLED_APPS=[...#跨域'corsheaders',...]中间件设置MIDDLEWARE=[...#跨域中间键设置'corsheaders.middleware.CorsMiddleware', ...]添加黑白名单(se......
  • vue的响应式原理:依赖追踪
    在明白原理之前,我们有很多表面现象、使用场景需要记忆。明白了原理后,你会发现它们已经不需要记了,因为从原理出发,你自己都能把它们推导出来,一切是那么的自然而然。感觉就是:这还用记吗?很明显嘛!之前我对vue的响应式原理,只是一知半解,导致开发中经常会出现疑问,比如:为什么有的数据它不......
  • 【HarmonyOS】应用内引用HAR(静态共享包)
    ​ 【关键词】共享包、静态共享包、引用HAR 【实现流程】一、     新建一个API9Stage模型的工程。二、     创建HAR模块。1. 鼠标移到工程目录顶部,单击右键,选择新建 > 模块,在工程中添加模块。​​2. 在ChooseYourAbilityTemplate界面中,选择StaticLi......
  • [转]vue3+tsx开发语法详解
    原文地址:vue3+tsx开发语法详解-知乎很多组件库都使用了TSX的方式开发,主要因为其灵活性比较高,TSX和SFC开发的优缺点就不介绍了,这里主要说一下将SFC项目改造为TSX的过程。安装JSX库pnpminstall@vitejs/plugin-vue-jsx-D安装完之后在vite.config.ts进行插件使用,代码如下......
  • 【HarmonyOS】应用内引用HAR(静态共享包)
     【关键词】共享包、静态共享包、引用HAR【实现流程】一、     新建一个API9Stage模型的工程。二、     创建HAR模块。1. 鼠标移到工程目录顶部,单击右键,选择新建 > 模块,在工程中添加模块。2. 在ChooseYourAbilityTemplate界面中,选择StaticLibrary,并单击Next。......
  • 学习Vue3 第六章(认识Ref全家桶)
    ref接受一个内部值并返回一个响应式且可变的ref对象。ref对象仅有一个 .value property,指向该内部值<template><div><button@click="changeMsg">change</button><div>{{message}}</div></div></template><......
  • XLSX.utils 下的 Api
    工作表aoa_to_sheet将JS数据数组转换为工作表json_to_sheet将JS对象数组转换为工作表table_to_sheet将DOM表元素转换为工作表sheet_add_aoa将JS数据数组添加到现有工作表中sheet_add_json将JS对象数组添加到现有工作表中sheet_add_dom将DOM表元素中的数......
  • vue 配合后端请求异步加载APP.vue
    主要是想在加载路由什么的之前先请求一些配置参数,毕竟我的情况是首页要根据不同的配置显示不同的路由组件一般加载App.vue是这么写的import{createApp}from'vue'importAppfrom'./App.vue'createApp(App).mount('#app')异步加载的话,天才我深思熟虑后是这么写的。我......
  • Vite4+Typescript+Vue3+Pinia 从零搭建(6) - 状态管理pina
    项目代码同步至码云weiz-vue3-templatepina是vue3官方推荐的状态管理库,由Vue核心团队维护,旨在替代vuex。pina的更多介绍,可从pina官网查看特点更简洁直接的API,提供组合式风格的API支持模块热更新和服务端渲染对TS支持更为友好安装npmipinia使用1.创建......