了解Vue3是如何进行组件更新的 组件更新patchvue 在更新的时候,使用 patch 方法更新新老节点,判断老节点是否可以复用在 patch 时会先比较新老节点的类型,比较的方式就是判断 type 和 key 是否都相等,类型不同代表不能复用,直接卸载。然后判断新节点的类型, 在这里可以看到有三种类型的节点,使用不同的方法进行处理: 文本节点 Fragment 节点,vue3 引入 Fragment,在 vue3 的模板中可 2024-05-17 技术博客 #Vue
一文搞定 React 的 ref 创建一个 ref类组件的 ref函数当 ref 是一个函数时,入参就是当前的 DOM 节点,在函数内将它赋给别的值,就可以通过这个值进行访问。 字符串ref 可以绑定一个字符串,它会被保存到 this.refs 上。 另外当判断 ref 绑定的是字符串时,其实走的是函数的处理逻辑,只不过字符串都被绑定在了 this.refs 上。 createRef()通过 React 提供的 createRef 2024-04-29 技术博客 #React
一文搞定 React 的 useEffect 当依赖为引用数据类型时依赖是引用数据类型和基本类型对比 每次点击发现只会输出 useEffect - obj,也就是当 useEffect 依赖为对象时,每次更新都会执行。 依赖是如何进行比较的123456789101112131415function areHookInputsEqual( nextDeps: Array<mixed>, prevDeps: Array<mi 2024-04-25 技术博客 #React
Nest 初体验 初始化项目12$ npm i -g @nestjs/cli$ nest new project-name 文件概览src/main.ts 入口文件123456789import {NestFactory} from '@nestjs/core';import {AppModule} from './app.modul 2024-04-02 技术博客 #Nest
Vue3 思维导图(二) 组件注册 Props v-model 透传Attributes 插槽 依赖注入 异步组件 自定义指令 插件 KeepAlive Teleport Suspense 2024-03-25 技术博客 #Vue
从输入URL开始构建浏览器知识体系 从浏览器输入 URL 到页面呈现都发生了什么 输入 URL 查找缓存,有缓存读取缓存,没有进行下一步 DNS 域名解析,解析出域名对应的 IP 地址 和服务器建立 TCP 连接 发送 HTTP 请求 服务端响应请求,返回结果 断开 TCP 连接 浏览器渲染 缓存 首先查找浏览器缓存 然后查找操作系统缓存 查找路由器缓存 查找 ISP 缓存 http 缓存强缓存如果命中强缓存就无需向服务器发送请 2024-01-09 技术博客 #浏览器
Webpack优化篇 前置性能分析工具这里使用 Webpack-bundle-analyzer 1pnpm add progress-bar-webpack-plugin -D 配置 12345678const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports = 2024-01-06 技术博客 #webpack
Webpack入坑指北 初始化项目首先新建一个项目然后初始化。 12npm init -ypnpm add webpack webpack-cli -D 创建一个 src/main.js 文件,随便写点啥在根目录创建 build/webpack.common.js 文件 12345678910const path = require("path");module.exports 2023-12-27 技术博客 #webpack #工程化
深入浅出前端模块化原理 前言什么是模块化模块化简单说就是为了解决代码没有自己的“域”,很容易造成命名冲突,依赖混乱。我们的代码通过模块化隔离开来,更有利于后期维护。 模块化解决方案从最开始的通过立即执行函数(IIFE)到 CJS、AMD、CMD、UMD、再到 ES6 引入模块化 ESM,本文主要写 CJS 和 ESM。 CommonJs实现原理123// src/index.jsconst name = require( 2023-12-18 技术博客 #模块化 #CommonJs #ES Module