- 博客(19)
- 收藏
- 关注
RSS订阅原创 封装一个组件需要注意什么
必须指定不使用模糊的ObjectArray，能具体就具体做好参数校验，避免外部乱传导致组件异常Props 是单向数据流，组件内部绝不直接修改 props合理使用slot（默认、具名、作用域插槽）支持v-model语法糖（符合用户习惯）开放必要的事件（emit），让父组件能监听和控制支持透传属性 $attrs、透传事件 $listeners（Vue3 直接 v-bind="$attrs"）职责单一、单向数据流、高可复用、低耦合、边界安全、易于扩展。
2026-03-29 22:03:23
173
原创 es6遍历对象的方法有哪些
自身所有字符串属性（可枚举 + 不可枚举），不含 Symbol。：自身所有属性（可枚举 + 不可枚举 + Symbol）：自身可枚举 + 原型链可枚举，不含 Symbol。：自身可枚举，不含不可枚举、不含 Symbol。：自身所有属性（字符串 + Symbol）：每次循环得到属性名（字符串 key）：遍历可枚举属性（自身 + 原型链）：获取自身所有 Symbol 属性。：只 Symbol，不管是否可枚举。：获取所有自身属性描述符。：获取自身可枚举属性名。：获取自身可枚举属性值。：获取自身可枚举键值对。
2026-03-29 15:10:57
239
原创 跨域及其解决方案
跨域（Cross-Origin）：浏览器出于安全，遵守同源策略（Same-Origin Policy），限制一个源的脚本去访问另一个源的资源。同源 =协议域名端口三者完全相同只要有一个不一样，就是跨域。→：同源→：跨域（协议不同）→：跨域（子域名不同）→：跨域（端口不同）只有浏览器有跨域限制，服务端之间调用没有跨域。开发环境：用proxy 代理生产环境：用CORS或Nginx 代理基本淘汰。
2026-03-16 12:44:00
465
原创 pinia是什么，如何使用
核心步骤：安装 Pinia → 全局注册 Pinia 实例 → 通过创建 Store（包含 state/getters/actions）→ 组件中导入并实例化 Store 使用。响应式注意：解构 Store 属性时必须用保持响应式，actions 可直接解构调用。最佳实践：简单状态可直接修改，复杂逻辑 / 异步操作建议通过 actions 处理，便于维护和调试。
2026-03-15 11:03:02
417
原创 vuex的使用场景与属性
/ 1. 存储状态state: {userInfo: null, // 用户信息cartCount: 0 // 购物车数量},// 2. 修改state的唯一方法（同步）// 设置用户信息},// 更新购物车数量},// 3. 处理异步逻辑（如请求接口）actions: {// 异步获取用户信息try {// 提交mutation修改stateconsole.error('获取用户信息失败：', err)},// 异步更新购物车数量},
2026-03-14 10:18:09
404
原创 什么是重绘和回流？如何通过重绘和回流来做页面的优化性能
回流：修改元素几何属性（位置 / 大小）导致布局重新计算，性能消耗大，回流必触发重绘。重绘：修改元素外观样式（颜色 / 透明度）仅重新绘制像素，性能消耗小，重绘不一定触发回流。前端性能优化的核心思路之一：尽量减少不必要的回流，降低浏览器渲染开销。批量操作：用 CSS 类名 /批量修改样式 / DOM，减少触发次数。缓存属性：避免频繁读取等布局属性，先缓存再使用。优选属性：用代替几何属性修改，仅触发重绘不触发回流。减少 DOM 操作：批量添加节点、给高频事件加节流 / 防抖，降低回流频率。
2026-03-10 20:44:36
305
原创 vue为什么使用虚拟dom
虚拟 DOM 并不是真实的 DOM 节点，而是用 JavaScript 对象来描述真实 DOM 结构的「轻量级副本」。</div>tag: 'div', // 标签名props: { // 属性/样式/事件等id: 'app',},children: [ // 子节点tag: 'p',],el: null // 对应的真实 DOM 节点（初始化后会关联）提升性能：通过 diff 算法找到最小变更，减少昂贵的真实 DOM 操作，避免频繁重排 / 重绘；跨平台。
2026-03-09 08:49:25
353
原创 路由拦截（路由守卫）是如何实现的
Vue 路由拦截通过路由守卫实现，核心分全局、路由独享、组件内 3 类，其中是最常用的全局前置守卫；路由守卫的核心是to（目标）、from（来源）、next（控制跳转）三个参数，next必须调用否则路由会阻塞；常见应用场景：登录权限校验（全局）、角色权限控制（路由独享）、表单未保存提示（组件内）。注：next()方法用法next()是 Vue 路由守卫中控制路由跳转的核心方法，所有路由守卫（全局、路由独享、组件内）的回调函数都必须调用它，否则路由跳转流程会被卡住。
2026-03-09 08:48:56
584
原创 vue路由的传参方式有哪些
动态路由参数：URL 嵌入、刷新不丢，适合必填标识，需配置/:参数名，推荐name跳转；query 参数：URL 拼接、刷新不丢，适合可选筛选，无路由配置限制，namepath都支持；隐式 params：URL 不可见、刷新丢失，仅临时参数使用，且仅支持name跳转；path跳转别传 params，隐式 params 别依赖刷新，参数变化要监听。
2026-03-08 21:23:34
601
原创 vue实现路由的方式及原理
适配非浏览器环境（如 Node.js、Weex），Vue Router 会自动检测环境，非浏览器环境下默认使用该模式，无需手动配置。实现方式：核心是 Hash 模式（）和 History 模式（核心区别：Hash 模式带、无需后端、SEO 差；History 模式无、需后端兜底、SEO 好；底层原理Hash 模式：利用不发送到服务器的特性，监听hashchange事件解析路径；History 模式：利用 HTML5修改 URL 不刷新，监听popstate。
2026-03-08 21:21:51
409
原创 vue路由的跳转方式有哪几种？
声明式导航：用组件，适合模板中静态跳转（导航栏 / 菜单），支持toreplace等属性。编程式导航：用方法，适合 JS 逻辑中动态跳转（登录 / 按钮点击），推荐用name而非path跳转。特殊场景：路由配置中的redirect（重定向）、alias（别名），适合路径兼容或默认跳转需求。
2026-03-07 17:19:40
659
原创 Axios是怎么进行封装的
创建独立实例：通过隔离不同接口配置，避免全局污染；拦截器核心：请求拦截器统一加 Token / 公共配置，响应拦截器集中处理错误和数据格式化；简化调用：封装 get/post 等方法，让业务代码更简洁，同时统一管理接口地址。
2026-03-07 15:34:43
325
原创 SPA单页面首屏加载优化方案
首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容首屏加载可以说是用户体验中最重要的环节关于计算首屏时间利用performance.timing提供的数据：通过DOMContentLoad或者performance来计算出首屏时间// 方案一：});
2026-03-02 13:23:22
593
原创 js实现继承的方式有哪些
然后设置F的prototype为Parent的实例，再将Child的prototype指向F的实例。// 使用ES6语法糖实现寄生组合式继承：Object.setPrototypeOf 或者 __proto__ (已废弃) 或者 Object.create() 方法。例如：Object.setPrototypeOf(Child.prototype, Parent.prototype);缺点是父类的引用类型属性会被所有子类实例共享，导致修改时相互影响，且在创建子类实例时无法向父类构造函数传递参数。
2026-01-15 13:33:00
603
原创 Vue路由懒加载的原理及实现
路由懒加载的主要原理就是，运行后用户会将整个打包的文件引入而后在其中查找对应的模块然后才将其呈现给用户。这样会使得在打包文件中查找对应模块时在浏览器中可能会出现短暂的空白页，从而降低用户体验。而路由懒加载是将各个模块分开打包，在用户查看下相关模块内容时就直接引入相关模块的打包文件然后进行显示，从而有效的解决了浏览器可能出现短暂时间空白页的情况。可以分割代码块，。下面是几种常见懒加载的方法。
2023-05-13 08:39:19
2278
1
原创 对异步编程Promise的理解
Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配（ES8），但是它们是基于Promise的)，从语法上讲，Promise。
2023-05-05 22:36:47
346
1
原创 Vue中watch的用法
6、computed属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值，而watch监听的函数接受两个参数，第一个是最新的值，第二个是输入之前的值。，即不要用箭头函数来定义watcher函数，因为箭头函数中的this是指向当前作用域，对于箭头函数来说，箭头函数中的this指向的是定义时的对象而不是函数运行时所在的对象，即全局定义时的window对象。，当computed内有异步操作是无效，无法监听数据的变化，而。
2023-04-20 11:06:06
510
1
原创 JavaScript 类(class)
我们使用 class 关键字来创建一个类，类体在一对大括号 {} 中，我们可以在大括号 {} 中定义类成员的位置，如方法或构造函数。每个类中包含了一个特殊的方法 constructor()，它是类的构造函数，这种方法用于创建和初始化一个由创建的对象。创建一个类的语法格式如下：实例:以上实例创建了一个类，名为 "Runoob"。类中初始化了两个属性： "name" 和 "url"。
2023-04-19 22:31:22
287
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人