- 博客(40)
- 收藏
- 关注
RSS订阅原创 Vue 中监测路由变化时，通常不需要开启深度监听（deep: true）
路由变化时，$route对象的引用会改变，而非内部属性修改，因此普通监听即可捕获。deep: true用于监听引用不变但内部属性修改的对象，与路由变化的特性不匹配。因此，监测路由变化不需要开启深度监听。
2025-07-10 19:59:53
471
原创 Vue 中mounted 生命周期钩子的执行时机和 v-for 的渲染顺序
若v-for的数据源是同步数据（初始就有），mounted执行时v-for已经渲染完成，可直接操作 DOM。若v-for的数据源是异步数据mounted执行时可能尚未渲染，需用$nextTick或watch确保 DOM 已更新。
2025-07-09 19:28:11
644
原创 JavaScript 中导入模块时，确实不需要显式地写 node_modules 路径。
【摘要】在Webpack/Vite等工具中导入模块时，无需手动添加node_modules路径。根据JavaScript模块解析规则，不以./或../开头的路径会自动从node_modules查找。例如import 'nprogress/nprogress.css'会正确解析为node_modules/nprogress/nprogress.css，而带有node_modules前缀的写法反而不规范。这种设计简化了模块引用，符合前端工程化最佳实践。（99字）
2025-07-06 16:43:46
386
原创 vue router 里push方法重写为什么要重绑定this
VueRouter的push方法内部依赖this访问路由实例属性（如this.history）。若直接重写调用会丢失this绑定，导致this指向全局对象或undefined（严格模式），从而报错。正确做法是使用call方法显式绑定this，确保origin.call(this,...)将this指向VueRouter实例，才能正常访问this.history等关键属性。这体现了JavaScript中this绑定在方法重写时的重要性。
2025-07-05 19:58:05
627
原创 Vue Router 中，将路由配置的props选项设置为true
VueRouter中设置props:true可将路由参数作为props传递，使组件不再依赖$route对象，提高可复用性。传统方式需访问$route.params导致耦合，而通过props接收参数能让组件独立使用。配置时只需在路由对象添加props:true，组件通过常规props声明接收参数即可。这种方式简化了组件逻辑，便于测试和复用。
2025-07-05 16:37:21
290
原创 Vue Router 中，params参数的名称必须与路由配置中的动态路径参数名完全一致
params: { keyword: this.keyword } // 参数名必须是keyword。path: '/search/:keyword', // 这里的:keyword是动态路径参数。来匹配路由配置中的动态路径参数。// 正确：params参数名与路由配置中的:keyword匹配。时，参数名必须与路由配置中的参数名（如。// router.js（路由配置）Vue Router 通过。
2025-07-05 16:23:48
422
原创 Vue Router 中$route.path与 params 的关系
在 Vue Router 中，params 参数是通过路由配置的。是 params 参数。
2025-07-05 15:39:45
299
原创 promise创建代码流程分析
回调函数执行时，会调用 resolve(userData) ，将 Promise 状态改为 fulfilled ，并传递 userData。- 所有通过 .then(onFulfilled) 注册的成功回调会被触发， userData 会作为参数传入回调函数。- Promise 的执行器函数会同步立即执行，而 setTimeout 属于异步操作，其回调函数的执行时机由定时器决定。- 执行器函数内的 setTimeout 会被注册为浏览器/Node.js的异步任务，但不会立即执行。
2025-07-03 11:11:27
400
原创 vue中的defineasynccomponentES动态导入
import('./Component.vue') 是 ES模块动态导入语法，用于在运行时异步加载模块。- 动态加载模块：返回一个 Promise ， resolve后得到组件模块对象。- 作用：组件首次使用时，通过函数返回的 Promise 异步加载组件。- 异步加载：不会阻塞主线程，适合优化首屏加载性能。
2025-07-03 10:52:48
230
原创 vue中的torefs
toRefs(state) 的返回值是一个 包含多个 ref 对象的新对象，每个 ref 对应 state 的一个属性，并与原始属性双向绑定，主要用于在解构响应式对象时保持其响应式特性。在 Vue 中， toRefs(state) 的返回值是一个 新对象，其中每个属性都是对应 state 中原始属性的 ref 对象。b: ref('text') // ref 对象，值为 state.b。a: ref(1), // ref 对象，值为 state.a。
2025-07-02 22:51:19
477
原创 vue中的toRef
toRef(obj, key) 的两个参数分别是响应式源对象和目标属性名，用于将对象的属性转换为 ref ，确保解构或传递属性时保持响应式关联，是组合式 API 中处理响应式数据的关键工具。- 若源对象不是通过 reactive 、 shallowReactive 等创建的响应式对象， toRef 生成的 ref 不会追踪原始属性的变化。在 Vue 中， toRef 函数用于将响应式对象的属性转换为一个独立的 ref 对象，同时保持与原始属性的关联。// 仍为 '普通对象'
2025-07-02 21:22:42
628
1
原创 beforeRouteLeave 的触发本质
当你点击其他组件链接时，即使路径未变（可能因组件切换、 v-if 控制等原因），只要当前组件实例进入卸载流程，就会触发 beforeRouteLeave。- 守卫触发时机：在组件卸载流程启动时， beforeRouteLeave 会被立即调用，此时导航逻辑尚未完全处理。- 触发时机： beforeRouteLeave 在组件卸载前触发，与路径是否变化无关，只取决于组件是否被销毁。- 导航控制：守卫内必须调用 next() 来决定导航是否继续，未调用会导致阻塞，但钩子本身仍会执行。
2025-06-30 21:23:27
465
原创 mapstate
在 Vuex 中， mapState 用于将 store 中的状态映射到组件的计算属性。当需要映射多个状态时，可以使用数组写法，直接列出需要映射的状态名，映射后的计算属性名与状态名一致。'state1', // 映射 store.state.state1。'state2', // 映射 store.state.state2。'list', // 映射 store.state.list。例如： { customName: 'state1' }。// 直接映射 store 中的状态到计算属性。
2025-06-29 23:43:13
151
原创 引入的js文件里有过引用vue，在外侧仍需再写一次吗
场景：文件A中导入了Vue并使用，但未将Vue作为模块导出（如 export default Vue ）。- 场景：文件A显式导出Vue（如 export { Vue } from 'vue' ）。import { Vue } from './utils' // 从目标文件导入Vue。import Vue from 'vue' // 必须再次导入。export { Vue } // 导出Vue。// utils.js（目标文件）// 主文件中使用utils.js。// utils.js（目标文件）
2025-06-29 20:03:47
179
原创 vue中的ref
在Vue中， ref 是用于给元素或子组件添加引用标识的属性，通过它可以在组件实例中直接访问对应的DOM元素或子组件实例。在模板中给元素添加 ref="元素名" ，然后通过 this.$refs.元素名 访问对应的DOM节点。// 输出对应的DOM元素。给子组件添加 ref ，可直接通过 this.$refs.组件名 访问子组件的实例和方法。
2025-06-27 10:41:59
446
原创 Array.reduce
Array.reduce() 是JavaScript中用于将数组元素累积计算为单个值的高阶函数，其核心作用是对数组中的每个元素执行一个累加器函数，最终返回累积结果。- 初始值 0 传入后，累加过程为： 0 + 1 = 1 → 1 + 2 = 3 → 3 + 3 = 6 → 6 + 4 = 10 → 10 + 5 = 15。- 传入 initialValue 时，会从数组第一个元素开始，将 initialValue 作为初始 accumulator。- array （可选）：原数组。
2025-06-26 22:45:58
621
原创 vue中父子组件通过prop传递函数，子组件调用函数本质
子组件调用 parentFunc 时，实际执行的是父组件中的 parentFunction ，且 this 指向父组件实例。- 只有当父组件传递的是箭头函数且依赖父组件作用域时，需注意 this 指向（箭头函数的 this 在定义时确定，而非调用时）。在Vue中，通过 prop 将函数从父组件传递到子组件后，子组件调用的本质是父组件上的原始函数，而非新函数。- 若父组件传递函数时未做特殊处理（如箭头函数、函数表达式），子组件接收到的始终是父组件中定义的原始函数引用。// 调用父组件传递的函数。
2025-06-26 21:36:13
364
原创 event.target
在前端开发中， event.target 是事件对象（ Event ）的一个属性，用于指向触发事件的原始DOM元素。它在事件冒泡过程中非常关键。- 定义：当事件被触发时， event.target 始终指向最初触发事件的元素，不受事件冒泡或捕获阶段的影响。- 场景：常用于处理嵌套元素的事件时，区分具体是哪个元素触发了事件。
2025-06-26 21:10:05
115
原创 :checked=“true“
checked="true" （不使用 v-bind ）：传递字符串 "true" ，浏览器会将其视为字符串字面量，非布尔值，此时复选框会被强制选中（因为任何非空字符串在HTML中都会被视为真值）。- 不使用 v-bind 时（如 checked="true" ），会将值作为字符串处理，可能导致逻辑错误，仅在静态场景下使用（如固定选中状态且无需动态更新）。-- 错误示例：不使用v-bind时，checked属性会被当作字符串处理 -->-- 正确示例：使用v-bind传递布尔值 -->
2025-06-26 21:04:33
522
原创 在Vue中，通过 props 传递数据是父组件向子组件传值的核心方式，属于单向数据流（父组件数据变化时子组件同步更新，反之不影响）
布尔值特殊场景：不写值时默认视为 true （如 <child is-active /> 等价于 is-active="true" ）。- 无论传递什么内容（如数字、变量名），子组件接收到的都是字符串（如 age 接收到 "25" 而非 25 ）。<child-component name="张三" age="25" is-active="true" />传递内容类型 变量、表达式、数值、布尔值、对象等 纯字符串字面量（或默认布尔值 true ）场景 通过 v-bind 不通过 v-bind。
2025-06-26 20:58:06
310
原创 ES6 模块化通过 export 和 import 实现暴露和导入功能
一个模块只能有一个默认导出，适合暴露单个主要对象（如组件、函数），导入时可自定义名称。export class Calculator { /* 类定义 */ }// 示例：utils.js。
2025-06-26 19:26:58
411
原创 vue中v-model修饰符number
在Vue中， v-model 的 number 修饰符用于将输入值自动转换为数值类型，避免因表单输入默认返回字符串导致的类型问题。- 非数字开头的输入（如 "a123" ）会转为 NaN ，建议配合 v-model.lazy （失去焦点时转换）使用；- 输入类型转换：当用户在表单中输入数字时， number 会将字符串转为数值（ parseFloat ）。- 输入非数字（如 "abc" ）时， age 保持原值（不会转为 NaN ）。-- 先转数值，再失去焦点时更新 -->
2025-06-22 18:25:26
270
原创 vue中的数据劫持和数据代理
1. 代理定义：在Vue实例中，通过 Object.defineProperty 将 this.xxx 的读写映射到 this.$data.xxx。2. 简化访问：开发者无需通过 this.$data.xxx 操作数据，直接用 this.xxx 即可，本质是访问代理后的属性。3. 当 this.xxx = newVal 时，实际触发的是 this.$data.xxx 的setter，从而触发视图更新。2. 数据代理负责简化数据访问，让开发者能通过 this.xxx 直接操作被劫持的数据。
2025-06-22 17:50:18
388
原创 Vue.set
直接通过 obj.newProp = value 添加属性，Vue无法检测到变化，需用 Vue.set(obj, 'newProp', value)。Vue.set 是Vue中用于解决响应式问题的重要方法，主要作用是为响应式对象添加新属性时，确保Vue能追踪到属性变化。- 直接通过 arr[index] = newVal 修改数组，Vue无法响应，需用 Vue.set(arr, index, newVal)。- 要操作的目标对象（可以是Vue实例的数据对象，或数组）。// 错误方式（无响应）
2025-06-22 17:38:32
416
原创 Array.sort
不传入比较函数时，按字符 Unicode 码排序（如 [10, 2] 会排成 [10, 2] ，因 '10' 字符码小于 '2' ）。arr.sort(compareFn) ， compareFn 是自定义比较函数，必须返回数值。- 若 compareFn(a, b) < 0 ， a 排 b 前；- 升序： arr.sort((a, b) => a - b)；- 降序： arr.sort((a, b) => b - a)。- 若结果 > 0， b 排 a 前；
2025-06-21 18:08:24
535
原创 Vue.js 中，计算属性里的getter 函数的调用时机
计算属性会自动追踪其依赖的响应式数据（如 data 中的属性）。当这些依赖数据发生变化时，getter 函数会被重新调用，更新计算结果。当你第一次访问计算属性（如 this.fullname ）时，会立即调用其 getter 函数，计算并返回结果。1. 首次访问计算属性时触发调用。2. 依赖数据变化时重新调用。
2025-06-21 17:44:16
518
原创 在使用 res.render() 方法时，第二个参数（也就是传递给模板的数据）必须是一个对象。
在使用 res.render() 方法时，第二个参数（也就是传递给模板的数据）必须是一个对象。这是由 Express 框架的设计所决定的，因为模板引擎需要一个键值对结构来注入变量。users: ['Alice'] // 模板中通过 users 访问。title: '首页', // 模板中通过 title 访问。res.render('page', '直接传字符串');// ❌ 错误：传递字符串。// ❌ 错误：传递数组。
2025-06-18 20:27:36
502
原创 EJS 模板中，不能直接写纯 JavaScript 代码而不使用 ＜% ... %＞ 或 ＜%= ... %＞ 等标签
姓名：<%= name %></p><p>姓名：<%= name %>
2025-06-17 20:36:28
150
原创 静态资源中间件没有显式的 next()
异步处理：静态资源中间件使用 fs.stat() 或 fs.access() 等异步方法检查文件是否存在。检查请求路径是否对应实际文件（例如 /style.css → public/style.css）。封装细节：express.static() 是一个封装好的第三方中间件，其内部逻辑对用户不可见。不发送响应，而是通过内部逻辑隐式调用 next()，将请求传递给下一个中间件。直接发送文件内容（如 res.sendFile()），请求流程终结。行为：请求会挂起，客户端将一直等待，最终超时。
2025-06-17 18:52:38
166
原创 find() 方法
在 JavaScript 中，Array.find() 是一个用于数组的方法，用于查找符合特定条件的第一个元素。它不会返回所有匹配的元素，而是在找到第一个匹配项后立即返回。// 示例：查找年龄大于18的用户。array（可选）：调用 find() 的原始数组。// 返回一个布尔值，判断元素是否符合条件。如果没有找到，则返回 undefined。element：当前遍历的数组元素。index（可选）：当前元素的索引。如果找到匹配的元素，则返回该元素。
2025-06-17 18:17:38
196
原创 res.send()
在 Express 中，res.send() 方法会根据响应内容的类型自动设置 Content-Type 头，并进行相应的处理。此时，浏览器会直接显示 <h1>这是纯文本，不会被解析为 HTML</h1>，而不会将其渲染为 HTML 标题。res.send('<h1>这是纯文本，不会被解析为 HTML</h1>');浏览器会渲染出一个标题为 "Hello, World!手动设置 Content-Type。默认行为：字符串被视为 HTML。
2025-06-17 18:08:06
185
原创 静态资源中间件函数的执行次数
在 Express 的上下文中，请求（Request） 指的是客户端（如浏览器）向服务器发送的 HTTP 请求。静态资源中间件同样会执行，但由于请求的路径与静态资源不匹配，它会直接把请求传递给后续的中间件或路由。路由处理函数（如 app.get()、app.post() 中定义的回调）也会在每次匹配请求时执行。请求方法（GET、POST、PUT、DELETE 等）请求路径（例如 /users、/api/data）请求体（可选，例如表单数据、JSON 数据）修改请求或响应（例如解析请求体、添加响应头）
2025-06-17 17:52:23
435
原创 app.use() 既可以接受路径作为参数，也可以不接受路径参数，具体取决于你的使用场景。
方式一：不指定路径（全局中间件）app.use(middlewareFunction);此时，中间件会应用于所有请求（无论请求路径是什么）。express.static(root) 返回的中间件默认会匹配所有路径，但你可以通过 app.use() 的路径参数来限制它的作用范围。console.log(`收到请求: ${req.method} ${req.url}`);// 只处理 /static 开头的静态资源请求。// 静态文件中间件 - 处理所有静态资源请求。// 只处理 /api 开头的请求。
2025-06-17 16:16:30
262
原创 使用 Promise 方式调用 fs.appendFile() 时（即通过 fs.promises 模块
当使用 Promise 方式调用 fs.appendFile() 时（即通过 fs.promises 模块），该方法的返回值是一个 Promise 对象，而非文件内容或操作结果。
2025-06-13 16:55:43
206
原创 async/await
async/await 是 JavaScript 中处理异步操作的语法糖，基于 Promise 实现，让异步代码的写法更接近同步代码，极大提升了可读性和可维护性。
2025-06-13 16:40:29
416
原创 try-catch
try-catch 是编程中用于处理异常（错误）的结构化机制，允许代码在执行过程中捕获并处理可能发生的错误，而不是让程序直接崩溃。这种机制提高了代码的健壮性和用户体验。
2025-06-13 16:23:20
204
原创 __dirname
_dirname 是 Node.js 中的一个全局变量，它表示当前执行脚本所在的目录的绝对路径。始终指向脚本文件所在的实际目录，避免了相对路径的歧义。：当需要引用当前文件所在目录下的其他文件时，可以使用。：在不同环境或工作目录下执行脚本时，
2025-06-13 15:58:54
166
原创 在 JavaScript 中，无法直接从异步操作中返回值到同步代码
异步操作（如 setTimeout、fetch、事件处理等）在当前调用栈完成后才执行。当尝试这样做时：let result;}, 1000);// 这里返回的是 undefined，因为 setTimeout 还没执行这是因为setTimeout会将回调函数放入事件队列，主线程继续执行后续代码，不会等待回调完成。return。
2025-06-11 16:24:54
328
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人