weixin_45345105的博客

原创 Interview Project50 50/11

Interview Project50 50/0

原创 Vue.js 源码剖析-虚拟 DOM

ds

原创 Vue.js 源码分析（响应式、虚拟 DOM、模板编译和组件化）＞ 数据响应式原理-响应式处理入口 part2

数据响应式原理-响应式处理入口

原创 Vue.js 源码剖析-响应式原理 part1

目标vue.use set，el.data,data,data,el.mount等创建vue实例，初始化好数据后，vue如何渲染到页面的响应式目录根据不同功能把代码拆分不同文件夹（提高可读性可维护性）compiler转换render函数core核心globalApi Vue的静态方法instance 创建vue实例observer 响应式实现（重点讲）vueDom 重写了snabdomserver 服务端渲染sfc 单文件组件 把单文件组件转成js对象了解flow即可

原创 学习目录-拉钩大前端高薪训练营

平常都看免费课，十块钱的课都不愿买的我，下了血本购买了近万的课程，既然买了就努力学吧。做个目录方便自己复习。共8个阶段。阶段一阶段二阶段三阶段四阶段五阶段六阶段七阶段八2个模块2个模块6个模块6个模块5个模块5个模块5个模块2个模块完成选项从早到晚。阶段模块名称连接完成时间阶段一模块一函数式编程范式添加链接描述2020-11-12...

原创 手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法 - Virtual DOM 的实现原理

1

原创 手写 Vue Router、手写响应式实现、虚拟 DOM 和 Diff 算法 - 模拟 Vue.js 响应式原理

目标

原创 前端 自动化构建 入门及原理

自动化构建简介今天请假肝学习 周三.把一些重复的工作机械化和一些不被支持的新特转化，以及利用其它高效工具进行开发。自动化构建初体验scss也是一种自动化构建，帮我们自动转换成原始css，但也要重复执行命令，我们可以用npm script解决这些问题npm script 使用package中新增一个对象先安装下面这个，用于启动一个测试服务器package中添加启动成功我们要在这个服务器启动前设置样式，有个serve之前的属性添加变动监听变化 ，自动编译因为加了wat

原创 JavaScript 性能优化2

JSBench 使用https://jsbench.me/堆栈中的 JS 执行过程普通值存放栈内存，引用类型堆内存GC负责回收减少判断层级在我们编写的过程中，有可能会出现判断条件嵌套的场景，而往往这种场景都可以提前 return 掉那些无效的条件来达到嵌套层级的优化效果。// 嵌套 IFfunction doSomething(part, chapter) { const parts = ['ES2015','ES2016','工程化','Vue','React', 'Node']

原创 JS 性能优化

概述性能优化时不可避免的哪些内容可以看做是性能优化？任何一种可以提升程序运行效率，降低程序开销的行为，我们都可以看做是一种优化操作。这就意味着在软件开发的过程中，必然存在着很多值得优化的地方。无处不在的前端性能优化特别是在前端开发过程中，性能优化时无处不在的，例如请求资源时的网络、数据的传输方式，开发过程中所使用的的框架等。本篇的核心是JavaScript语言的优化，具体来说就是认知内存空间的使用，垃圾回收的方式介绍。从而可以让我们编写出高效的JavaScript代码。内存管理内存管理介绍

原创 从简到难手把手教你写Promise源码 手写 Promise源码

先写个简易版的const PENDING = 'pengding'const FULFILLED = 'fulfilled'const REJECTED = 'rejected'class MyPromise { constructor(excecutor){ excecutor(this.resolve,this.rejected) } status = PENDING // 成功之后的值 value = undefined; /

原创 JS Event Loops 微任务 宏任务

EventLoop、宏任务、微任务console.log(1)setTimeout(function () { 进入宏任务队列 console.log(2)}, 0)console.log(3)console.log('global begin') 1setTimeout(function timer1 () { queueMicrotask(() => { 把函数内的东西放入微任务队列 console.log('queueMicrotask') 2 })

原创 JS 函数式编程

为什么要学习函数编程以及什么是函数式编程函数式编程的特性(纯函数、柯里化、函数组合等)函数式编程的应用场景函数式编程库 Lodash为什么要学习函数式编程（FB）函数式编程是非常古老的一个概念，早于第一台计算机的诞生，函数式编程的历史。那我们为什么现在还要学函数式编程？函数式编程是随着 React 的流行受到越来越多的关注(例如react的函数组件，redux也是基于函数式编程的思想，想要学好react那么久必须学好FP)。Vue 3也开始拥抱函数式编程。函数式编程可以抛弃 this。打

原创 rn构建的时候 gradle 指定版本

然后 gradlew wrapper --gradle-version 7.5.1。cd 到 android。

原创 reactnative 手动下载 gradle.zip

/ 进入 C:\Users\jack.gradle\wrapper\dists\gradle-8.3-all 进入第一个目录 放入gralde.zip 然后重新 npm run start。// 手打下载 gradle.zip 运行npm run start 开始下载gradle 取消下载。// 然后去到这个目录下 C:\Users\jack.gradle\wrapper\dists。

原创 rn start

导入提示-> 导入过的才有提示 第一次导入不会有 ‘快速导入’找不到模块提示 需要配置tsconfig。去掉bable plugins 不然报错。只有 typescript文件才有提示。

原创 git 回退

基于master重新拉一个新分支推到远程 然后除了我commit之外都合进去。cherry-pick掉自己的代码。pros 下次再很进去代码干净。cons 下次合回去可能会漏。回退延期发版代码回退。

原创 vue 更新规则

原创 couldn‘t find package required on the “npm“ registry

切换npm源就行。

原创 react native xcode unable to open configuration settings file

pod install -verbose 可以看进度。pod install 然后重开。pod install可能会很久。

原创 react-native Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

rn

原创 tsx vue3 自定义指令

vue tsx 自定义指令

原创 解决 eslint Maximum call stack size exceeded问题 vue3 tsx onUpdate:

<Valuationv-model={this.valuationResult}{…{ ‘v-model:assessment’: this.assessment, ‘onUpdate:modifyBool’: this.getModifyBool }}mode=“disable”customMode={{ disable: { edit: [‘when’, ‘divideDateStart’] } }}/>类似 onUpdate:modifyBool这种可以写在对象上解决esli

原创 vue3-ecosystem项目

一些坑vue3 keep-alive中的响应式失效

原创 vue3 keep-alive中的响应式失效

坑

原创 provide不更新 遇到了个坑 使用emit(update:xx)的话 provide中的响应式不会更新点父组件中会

provide不更新 遇到了个坑 使用emit(update:xx)的话 provide中的响应式不会更新点父组件中会更新,直接使用方法更新就好了

原创 js 复制

<p @click="copyHandler(colorName)">function copyHandler(name: string) { const input = document.createElement('input') document.body.appendChild(input) input.setAttribute('value', name) input.select() if (document.execCommand('copy')) {...

原创 js 天数倒计时 时间倒计时

export function getOverTimeDown(endDateStr: string, outValue?: { value: string }, fn?: () => void) { let timer = window.setInterval(() => { let curTime = getEachTime(endDateStr); if (outValue) { outValue.value = curTime; } if

原创 :focus-visible 聚焦问题

问题:弹窗按ESC退出键会聚焦某个元素,导致出现白色的border,按tab键也会解决 &:focus-visible { outline: 0px; }

原创 vue3源码

reactivecreateReactiveObject其实就是个proxyfunction createReactiveObject( target: Target, isReadonly: boolean, baseHandlers: ProxyHandler<any>, collectionHandlers: ProxyHandler<any>) { if (!isObject(target)) { if (__DEV__) {

原创 vue3 监听computed属性

<script>import { defineComponent,ref ,computed,watch} from "vue";export default defineComponent( { name: "HelloWorld", props: { msg: String, }, setup(){ const count = ref(0) function clickHandler() { console.log(count.v.

原创 vue路径正常但组件加载错误

例如A页面有 A2 A3子组件A页面加载 A2组件时发现报错,报错的位置是没有导入的C组件原因A2组件中导入了C组件中导出的函数,所以加载A2组件时会先加载C组件获取导出的函数

原创 vue3-查看修改功能表单实现

<template> <div> <p v-if="type === 'text'" class="text">{{$attrs.modelValue}}</p> <input v-else :value="$attrs.modelValue" @input="changeData" v-bind="$attrs"> </div></template><script lang='ts'&gt

原创 vscode快捷键 脱离鼠标

打开cmd终端 Ctrl + Shift + C行操作Command key 常用度 备注删除行 Ctrl + Shift + K ★★★★★ 移动行 Alt + 上箭头/下箭头 ★★★★★ 复制粘贴行 Ctrl + C Ctrl + V ★★★★★ 跳到指定行 Ctrl + G ★★★★★ 行缩进 Ctrl + [ ★★★★★ 在上面插入一行 Ctrl + Shift + Enter ★ 在下面插入一行 Ctrl + Enter ★★★★★ 折叠行 Ctrl + Shift + [ ★

原创 vue3 ts 中快速获取 组件引用的返回类型 element ref 的返回类型

type TNumaImage = Exclude<ReturnType<Required<typeof NumaImage>['setup']>, void | RenderFunction | Promise<any>>;

原创 vue3中获取setup的返回值类型

获取某组件的引用后还需要去定义type,这样太麻烦了,可以获取setup的返回值类型,这样就方便能推断了.组件中setup return的内容方法核心是ts中的ReturnType类型https://www.typescriptlang.org/docs/handbook/utility-types.html#returntypetypetype partner = Exclude<ReturnType<Required<typeof PartnerInfo>['setup

原创 vue3+ts 如何知道函数传参的类型?

函数函数定义还不懂这个value是什么类型的,可以打出来看,有些什么类型 InputEventok,有类型了但是点target的时候只有这些,没有想要的input的值(value)再把targer打印出来,发现是input元素,name可以给targe 断言为input元素断言,HTMLInputElement,ok完美通过以上方法即可找到不懂的类型了...

原创 svg vertical-align: sub抖动

可以用margin-bottom: -3px; 解决

原创 记个坑url以及线上排错

不要這樣判斷，不然上綫url該了程序出錯

原创 new header 后 空对象

其实是有的,需要通过原型上的方法获取相关属性