- 博客(118)
- 收藏
- 关注
RSS订阅
原创 vue3+ts 使用 getCurrentInstance
页面中经常使用getCurrentInstance () 来获取 proxy ,不如封装一个方法搞定创建 useCurrentInstance.ts 文件import { ComponentInternalInstance, getCurrentInstance } from 'vue'export default function useCurrentInstance() { const { appContext } = getCurrentInstance() as Component.
2022-04-20 17:08:24
2485
1
原创 三次握手和四次挥手
三次握手第一次握手：客户端发送syn包(Seq=x)到服务器，并进入SYN_SEND状态，等待服务器确认；(客户端:我要和你建立连接)第二次握手：服务器收到syn包，必须确认客户的SYN（ack=x+1），同时自己也发送一个SYN包（Seq=y），即SYN+ACK包，此时服务器进入SYN_RECV状态；(服务器:收到,我准备好了)第三次握手：客户端收到服务器的SYN＋ACK包，向服务器发送确认包ACK(ack=y+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状
2022-04-08 14:15:33
1541
原创 vue3中v-model语法糖绑定引用类型和基本类型的使用
vue3.0中 v-model 是 modelValue 和 update:modelValue 的语法糖父组件<template> <div id="nav"> <!-- 子组件上绑定 v-model --> <son v-model="person" /> <p>我是父亲的:{{ person.name }}</p> <button @click="handleClick">
2022-03-09 15:18:46
2112
1
原创 TS中typeof的用法
检测变量或对象属性的类型,无法查询其他形式的类型(比如:函数调用的类型) console.log(typeof 'Hello world');// 这种查询是错误的:无法查询其他形式的类型(比如:函数调用的类型)function add1(num1: number, num2: number) { return num1 + num2}let ret: typeof add1(1, 2) 出现在类型注解的位置(参数名称的冒号后面)所处的环境就在类型上下文 let P = { x
2022-01-08 19:30:30
4505
原创 vue+element UI 表格树形数据处理序号
element UI的Table表格,遇到树形数据展示,父级数据显示序号,子项数据不展示序号先展示最终效果代码<el-table ref="table" row-key="id" size="medium" height="100%" border :data="tableData" :tree-props="{ children: 'chil.
2021-11-12 11:48:10
6842
5
原创 react脚手架配置代理
方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明： 优点：配置简单，前端请求资源时可以不加任何前缀。 缺点：不能配置多个代理。 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源） 方法二 创建代理配置文件 在src下创建配置文件：src/setupProxy.js 编写setupProxy.js配置具体代理规则：.
2022-05-12 16:58:39
107
原创 React/Vue中key的作用
react/vue中的key有什么作用？（key的内部原理是什么？）为什么遍历列表时，key最好不要用index?一 、虚拟DOM中key的作用： 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】, 随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：旧虚拟DOM中找到了与新虚拟DOM相同的key：若虚拟DOM中内容没变,
2022-05-10 19:33:45
175
原创 vue实现导入导出
导出<el-button type="primary" size="small" :disabled="!tableData.length @click="Export">导出</el-button>async Export() { //调接口 const res = await mainTaskStaticExportApi({ startYear: this.search.startYear,
2022-04-26 17:50:21
419
原创 vue3+ts项目中全局引入使用echarts
npm install echarts --save默认就是5版本的。 在main.ts 中引入并挂载 vue 实例上 import * as ECharts from 'echarts'const app = createApp(App)app.config.globalProperties.$ECharts = EChartsapp.mount('#app') 在使用 echarts 页面内 <template> <div id="myCha.
2022-04-18 22:52:53
3028
原创 实现一个深拷贝
function deepClone(obj, hash = new WeakMap()) { if (obj === null) { return null; } if (obj instanceof Date) { return new Date(obj); } if (obj instanceof RegExp) { return new RegExp(obj); } if (typeof obj !== "object") { re.
2022-04-15 10:07:03
251
原创 虚拟列表
先更新代码,js注释很详细,后续更新详细的虚拟列表说明<template> <div class="list-view" @scroll="handleScroll"> <!-- 撑起这个列表，让列表的滚动条出现 --> <div class="list-view-phantom" :style="{ height: contentHeight, }" ></div&.
2022-04-14 18:00:12
430
原创 重绘、回流
1、简单说一下页面的重绘和回流简单理解:一个房间只是改变软装(更换壁纸)就是重绘、而进行硬装(改变房屋结构)就是回流回流:重新构建页面结构当 render tree 的一部分或者全部的元素改变了自身的宽高、布局、显示或隐藏、或者元素内部的文字结构发生变化、导致需要重新构建页面的时候、回流就产生了重绘:改变元素外观当一个元素自身的宽高、布局、及显示或隐藏没有改变、只是改变了元素的外观风格时、就产生重绘例如改变元素的背景颜色 background-color结论:重绘不一
2022-04-13 22:13:39
302
原创 渐进增强、优雅降级
渐进增强:针对低版本浏览器进行页面重构,保证基本的功能的情况下,再针对高版本浏览器进行效果、交互等方面的改进和追加功能,以达到更好的用户体验优雅降级:一开始就构建完整的功能,然后再针对低版本的浏览器进行兼容...
2022-04-13 22:04:44
226
原创 面试题
label的作用 vue双向数据绑定的原理 做过哪些提高用户体验的操作 a:骨架屏 平时代码写注释吗 做过哪些复杂的业务 watch和computed的区别 父子组件间是如何传值的 做过哪些优化 a:防抖节流 b:虚拟列表 c:下拉加载更多...
2022-04-12 22:03:23
228
原创 class 实现一个Promise
const PENDING = 'pending'; const FULFILLED = 'fulfilled'; const REJECTED = 'reject'; class MyPromise { _status = PENDING; FULFILLED_CALLBACK_LIST = []; REJECTED_CALLBACK_LIST = []; constructor(fn) {...
2022-04-11 17:56:46
206
原创 快排
const arr = [22, 45, 18, 5, 13]function bubbleSort (arr) { if (arr.length <= 1) return arr const left = [] const right = [] const curr = arr.splice(0, 1) for (let i = 0; i < arr.length; i++) { arr[i] < curr ? left.push(arr[i]) : ri.
2022-04-10 16:09:50
302
原创 函数多次调用只执行一次
高阶/闭包使用场景: 多次支付只付一次function once(fn) { let done = false return function (...args) { if (done) return done = true return fn(...args) }}const fn = function (rmb) { console.log(`需要支付${rmb}元`);}const pay = once(
2022-04-08 17:43:25
579
原创 在地址栏里输入一个地址回车会发生哪些事情
1、解析URL：首先会对 URL 进行解析，分析所需要使用的传输协议和请求的资源的路径。如果输入的 URL 中的协议或者主机名不合法，将会把地址栏中输入的内容传递给搜索引擎。如果没有问题，浏览器会检查 URL 中是否出现了非法字符，如果存在非法字符，则对非法字符进行转义后再进行下一过程。2、缓存判断：浏览器会判断所请求的资源是否在缓存里，如果请求的资源在缓存里并且没有失效，那么就直接使用，否则向服务器发起新的请求。3、DNS解析：下一步首先需要获取的是输入的 URL 中的域名的
2022-04-08 14:44:00
258
原创 有效括号.
给定一个只包括 '('，')'，'{'，'}'，'['，']' 的字符串 s ，判断字符串是否有效。其中有效字符串需满足：左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合思路:1、判断字符串的长度,奇数直接返回 false2、循环遍历字符串,通过map来判断是左括号还是右括号,3、把左侧的括号 push 到一个 stk数组 中4、如果是右侧括号,通过map来找出左侧号并和 stk数组 最后一项进行全等判断5、不等返回false,全等则说明当前配对成功,则把st.
2022-04-07 15:27:40
449
原创 vue全选和小选
vue3<template> <div> <el-checkbox label="全选" v-model="allChecked"></el-checkbox> <el-checkbox v-for="(item, index) in arr" :key="index" v-model="item.checked" :label="item.name" size="la
2022-04-04 20:14:59
1126
原创 render 函数
render 函数接收一个 h 函数参数,返回值 h 函数调用 ,h 函数接收3个参数h函数参数1:html 标签名h函数参数2:style样式h函数参数3:节点内容render(h){ return h('h1',style:{color: red, backgroundColor: pink},'测试标题')}...
2022-03-26 21:53:20
758
原创 js扁平数据转成树形数据
function treeDataTranslate(data, pid = '', list = []) { for (const item of data) { if (item.parent === pid) { const children = treeDataTranslate(data, item.id); const obj = { ...item }; if (children.length) obj.children = children;.
2022-03-25 16:42:19
318
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人