- 博客(22)
- 收藏
- 关注
RSS订阅原创 Vue.nextTick(callback) 使用原理：
当你设置 vm.someData = 'new value'，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。原因是，Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。
2024-12-07 20:13:41
233
原创 CSS中有哪些方式可以隐藏页面元素？区别？
在平常的样式排版中，我们经常遇到某个模块隐藏的场景，通过css隐藏元素的方法有很多种,它们看起来一致，但其实每一种都有一些区别，这也造就了它们的一些使用场景的不同。
2024-12-07 17:03:42
1312
原创 vue数据双向绑定原理（附图）
我们先从单向绑定切入单向绑定非常简单，就是把 Model 绑定到 View ，当我们JavaScript 代码更新 Model 时，View 就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了 View，Model 的数据也自动被更新了，这种情况就是双向绑定。
2024-12-05 20:55:21
654
原创 webpack和Rollup、Parcel构建工具各自的优缺点
Rollup 适合构建 JavaScript 库和模块，支持优秀的 Tree Shaking 和较小的打包体积，但插件生态较小，适用场景有限。Parcel 适合快速开发和小型项目，开箱即用，构建速度快，但功能不如 Webpack 强大，缺乏对复杂配置的支持。Webpack 适合大型项目和复杂的前端构建，支持高度自定义，但配置复杂，构建速度较慢。
2024-12-02 20:34:37
191
原创 webpack代码优化
Webpack 是一个现代 JavaScript 应用程序的静态模块打包器，它可以将项目中的所有依赖项（JavaScript、图片、CSS 等）打包成一个或多个 bundle。优化 Webpack 配置可以提高构建速度、减少 bundle 大小，并改善加载性能。2.提升webpack打包构建速度。
2024-12-01 17:17:23
253
原创 EsLint的基本使用
根据以上代码的规则，如果在src目录下的js文件中，有使用var来定义变量，那么eslint就会给代码报错。ESLint 是一个插件化的工具，用于识别和报告 JavaScript 代码中的错误以及潜在的代码问题。ESLint 可以通过一个命令来帮助你初始化配置文件。然后把插件添加到你的 webpack 配置。ESLint 支持多种配置文件格式，包括。等，并且可以在项目根目录、子目录或者。
2024-11-30 16:27:40
366
原创 EsLint核心概念
ESLint 是一个可配置的 JavaScript 检查器。它可以帮助你发现并修复 JavaScript 代码中的问题。问题可以指潜在的运行时漏洞、未使用最佳实践、风格问题等。是可组装的JavaScript和JSX检查工具。这句话的意思就是，它是用来检查js和jsx的语法工具，可以配置各项功能，我们使用EsLint，关键是写EsLint的配置文件，里面写上各种rules规则，将来运行EsLint是就会以写的规则对代码进行检查。
2024-11-30 15:53:03
684
原创 webpack入门简单配置
当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个。是一个用于现代 JavaScript 应用程序的。，然后将你项目中所需的每一个模块组合成一个或多个。，它们均为静态资源，用于展示你的内容。在如门前你需要先理解一些。
2024-11-29 15:06:28
671
原创 React中的错误边界
React中的错误边界（Error Boundaries）是一种组件，它可以捕获其子组件树中任何位置的JavaScript错误，并记录这些错误，显示一个备选UI，而不是崩溃的组件树。错误边界只在组件的渲染期间、生命周期方法和构造函数中捕获错误，但不会捕获以下错误：事件处理、异步代码、服务端渲染以及错误边界本身抛出的错误。在如上代码中，当设置子组件的user值不为数组的时候报错，父组件触发getDerivedStateFromError()的生命周期钩子，并更改了错误标识，并通过条件渲染，防止页面出错。
2024-11-21 16:23:29
490
原创 renderProps的使用
具体来说，具有 render prop 的组件会接受一个返回 React 元素的函数，并在组件内部通过调用这个函数来实现自己的渲染逻辑。通过一个函数将组件的状态作为 props 传递给另一个组件，这种方式使得组件可以更加灵活地复用状态和行为，而不需要通过组件嵌套来共享状态，在实际使用中，render 可以有不同的名称，不一定是。在react中，通过如下方式可以在组件中嵌套组件，但这样会造成一个问题，如果A组件想传递数据给B组件，显然传递不了，那我们有其他方式吗？
2024-11-21 15:25:55
212
原创 CSS中对盒子模型的理解
什么是盒子模型：当对一个文档进行布局的时候，浏览器的渲染引擎会根据标准之一的css基础框盒模型，将所有元素表示为一个个矩形的盒子。一个盒子由4个部分组成：content,padding,border,margin。
2024-10-26 21:02:11
348
转载 移动端 100vh 显示 bug
移动浏览器（Chrome 和 Safari）有一个“有用”的功能，地址栏有时可见，有时隐藏，从而改变视口的可见大小。这些浏览器并没有随着视口高度的变化而将高度调整100vh为屏幕的可见部分，而是将100vh地址栏设置为隐藏地址的浏览器高度。结果是，当地址栏可见时，屏幕的底部将被切断，从而违背了100vh最初的目的。链接：https://juejin.cn/post/7374452765273538595。获取当前视窗的的高度，将高度按 100 份等分，得到视窗的单位高度, 然后通过。
2024-10-26 19:51:49
137
原创 vue3组件通信
在子组件中： 在父组件中： mitt 使用一个对象 来存储所有注册的事件监听器。对象的键是事件类型，值是一个数组，存储该事件类型的所有监听器。 使用： 1.控制台下载 2.在src目录下创建一个工具文件夹utils，并在utils目录下创建mitter.ts文件
2024-06-07 20:26:18
1017
原创 变量的解构赋值
数组和对象中提取值，对变量进行赋值，这被称为解构1.“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值如：let [a, b, c] = [1, 2, 3];2.解构不成功，变量的值就等于undefined其值为undifined如：let [x, y, ...z] = ['a'];其中： x // "a"z // []3.如果等号的右边不是数组，那么将会报错。如： let [foo] = 1;4.只有当一个数组成员严格等于undefined，默认值才会生效。
2024-05-15 16:59:53
166
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人