BoardYoungC

vue的生命周期Vue2 生命周期可分为 4 大阶段，共 8 个核心钩子，执行顺序固定： 阶段 核心钩子（执行顺序） 说明 初始化阶段 beforeCreate → created 实例创建，数据 / 方法初始化 挂载阶段 beforeMount → mounted 实例挂载到 DOM 节点 更新阶段 beforeUpdate → updated 数据更新，DOM 重新渲染 销毁阶段 beforeDestroy → destroyed 实例销毁，清理资源 1. 初始化阶段（实例创建）（1）beforeCreate（创建前） 执行时机：Vue 实例刚被创建，data、methods、props 等都未初始化，el 也未绑定。 this 指向：已指向实例，但无法访问 data/methods。 使用场景：仅能做一些无依赖的初始化（如加载动画开启）。 （2）created（创建完成） 执行时机：data、methods、props 已初始化完成，可访问，但 DOM 未生成（$el...

Vue 组件间通信1. 组件间通信的概念指 Vue 项目中不同组件（如父子组件、兄弟组件、跨层级组件）之间传递数据、事件或状态的机制，是组件化开发中实现功能协同的基础。 2. 组件间通信解决了什么问题 实现组件间的数据共享（如父子组件传递用户信息）； 完成组件间的行为联动（如子组件触发父组件的弹窗）； 解耦组件逻辑，让单个组件更独立、可复用。 3. 组件间通信的分类按组件关系可分为三类： 父子组件通信：最常见的通信场景（如父传子、子传父）； 兄弟组件通信：同一父组件下的子组件之间通信； 跨层级 / 任意组件通信：非直接嵌套的组件（如爷孙组件、无关联组件）之间通信。 4. 组件间通信的方案（Vue2 常用） 通信场景 方案 说明 父→子 props 父组件通过属性传递数据，子组件用props接收 子→父 $emit + 自定义事件 子组件触发this.$emit('事件名', 数据)，父组件通过@事件名监听 父子 / 跨层级 $parent / $children 直接访问父 /...

Vue 常用修饰符一、事件修饰符 修饰符 是什么 功能 应用场景 .stop 阻止事件冒泡的修饰符 阻止当前事件向父元素冒泡 子元素点击事件不影响父元素 .prevent 阻止默认行为的修饰符 阻止标签的默认行为（如 a 标签跳转、表单提交） 自定义表单提交逻辑 .once 事件仅触发一次的修饰符 事件绑定后仅执行一次，之后自动解绑 按钮点击后仅响应一次（如提交） .self 仅自身触发的修饰符 仅当事件触发在当前元素本身时才执行 避免父元素冒泡事件触发自身 .capture 事件捕获阶段触发的修饰符 事件在捕获阶段（而非冒泡阶段）执行 需要优先处理父元素事件的场景 二、按键修饰符 修饰符 是什么 功能 应用场景 .enter 监听回车键的修饰符 仅当按下回车键时触发事件 输入框按回车提交内容 .tab 监听 Tab 键的修饰符 仅当按下 Tab 键时触发事件 表单输入框切换焦点 .delete 监听删除 / 退格键的修饰符 仅当按下删除 / 退格键时触发事件 输入框内容删除时的逻辑处理 .esc 监听...

var、let、const之间的区别var 、 let 、 const 三者区别可以围绕下⾯五点展开：• 变量提升 • var 声明的变量存在变量提升，即变量可以在声明之前调⽤，值为 undefined let 和 const 不存在变量提升，即它们所声明的变量⼀定要在声明后使⽤，否则报错 123456789// varconsole.log(a) // undefinedvar a = 10// letconsole.log(b) // Cannot access 'b' before initializationlet b = 10// constconsole.log(c) // Cannot access 'c' before initializationconst c = 10 暂时性死区 • var 不存在暂时性死区 let 和 const 存在暂时性死区，只有等到声明变量的那⼀⾏代码出现，才可以获取和使⽤该变量 块级作⽤域 var 不存在块级作⽤域let 和 const...

v-show 与 v-if1. v-show 与 v-if 的共同点二者都是 Vue 中用于控制 DOM 元素显示 / 隐藏的指令，都可以根据表达式的布尔值决定元素是否展示。 2. v-show 与 v-if 的区别 维度 v-show v-if 渲染方式 始终渲染 DOM，通过display: none控制隐藏 条件为false时，不渲染 DOM 到页面 切换开销 切换时仅修改 CSS，开销小 切换时会销毁 / 重建 DOM，开销大 初始渲染开销 初始渲染需渲染 DOM，开销略大 条件为false时不渲染，初始开销小 支持场景 不能用于<template>标签 可以用于<template>标签（分组渲染） 3. v-show 与 v-if 的原理分析 v-show：编译后会给元素添加内联样式display: [条件? 'block' : 'none']，DOM 元素始终存在于文档流中。 v-if：编译时会根据条件生成条件渲染的代码块，条件为false时，对应的 DOM...

slot1. slot 是什么slot（插槽）是 Vue 组件中的内容分发机制，允许父组件向子组件的指定位置插入自定义内容，实现组件的 “模板复用 + 内容定制”，让组件更灵活通用。 2. 使用场景 组件内容自定义：封装通用组件（如弹窗、卡片）时，让父组件自定义组件内部的部分内容（如弹窗的标题、卡片的主体）； 组件结构扩展：复杂组件（如表格、导航栏）中，允许父组件插入自定义的列、菜单项； 组件逻辑与视图分离：子组件负责逻辑 / 布局，父组件负责具体视图内容的展示。 3. 分类 分类 说明 匿名插槽 无名称的插槽，父组件插入的内容默认填充到该插槽（一个组件仅一个匿名插槽） 具名插槽 带名称的插槽（通过name属性标识），父组件可指定内容插入到对应名称的插槽 作用域插槽 子组件向父组件传递数据的插槽，父组件可接收子组件的数据并自定义渲染内容 4. 原理分析slot 的本质是组件编译时的内容分发标记： 子组件中slot标签会被标记为 “内容插入点”； 父组件中插入到子组件标签内的内容，会被编译为 “待分发内容”； Vue 在渲染时，将...

Node 中的 Stream流（Stream），是⼀个数据传输⼿段，是端到端信息交换的⼀种⽅式，⽽且是有顺序的,是逐块读取数 据、处理内容，⽤于顺序读取输⼊或写⼊输出 Node.js 中很多对象都实现了流，总之它是会冒数据（以 Buffer 为单位）它的独特之处在于，它不像传统的程序那样⼀次将⼀个⽂件读⼊内存，⽽是逐块读取数据、处理其内 容，⽽不是将其全部保存在内存中 流可以分成三部分： source 、 dest 、 pipe 在 source 和 dest 之间有⼀个连接的管道 pipe ,它的基本语法是 source.pipe(dest) ， source 和 dest 就是通过pipe连接，让数据从 source 流向了 dest 在 NodeJS ，⼏乎所有的地⽅都使⽤到了流的概念，分成四个种类： • 可写流：可写⼊数据的流。例如 fs.createWriteStream() 可以使⽤流将数据写⼊⽂件 • 可读流： 可读取数据的流。例如fs.createReadStream() 可以从⽂件读取内容 • 双⼯流： 既可读⼜可写的流。例如 net.Socket •...

Node 中的 Buffer在 Node 应⽤中，需要处理⽹络协议、操作数据库、处理图⽚、接收上传⽂件等，在⽹络流和⽂件的 操作中，要处理⼤量⼆进制数据，⽽ Buffer 就是在内存中开辟⼀⽚区域（初次初始化为8KB），⽤ 来存放⼆进制数据 在上述操作中都会存在数据流动，每个数据流动的过程中，都会有⼀个最⼩或最⼤数据量 如果数据到达的速度⽐进程消耗的速度快，那么少数早到达的数据会处于等待区等候被处理。反之， 如果数据到达的速度⽐进程消耗的数据慢，那么早先到达的数据需要等待⼀定量的数据到达之后才能 被处理 这⾥的等待区就指的缓冲区（Buffer），它是计算机中的⼀个⼩物理单位，通常位于计算机的 RAM 中 简单来讲， Nodejs 不能控制数据传输的速度和到达时间，只能决定何时发送数据，如果还没到发送 时间，则将数据放在 Buffer 中，即在 RAM 中，直⾄将它们发送完毕 Buffer 类在全局作⽤域中，⽆须 require 导⼊ 创建 Buffer 的⽅法有很多种，我们讲讲下⾯的两种常⻅的形式： • Buffer.from() •...

ES6中 Promise在以往我们如果处理多层异步操作，我们往往会像下⾯那样编写我们的代码 12345671 doSomething(function(result) {2 doSomethingElse(result, function(newResult) {3 doThirdThing(newResult, function(finalResult) {4 console.log('得到最终结果: ' + finalResult);5 }, failureCallback);6 }, failureCallback);7 }, failureCallback); promise 对象仅有三种状态 pending （进⾏中） fulfilled （已成功） rejected （已失败） 对象的状态不受外界影响，只有异步操作的结果，可以决定当前是哪⼀种状态 ⼀旦状态改变（从 pending 变为 fulfilled 和从 pending 变为 rejected...

ES6中数组新增了扩展扩展运算符的应⽤ES6通过扩展元素符 … ，好⽐ rest 参数的逆运算，将⼀个数组转为⽤逗号分隔的参数序列 1234561 console.log(...[1, 2, 3])2 // 1 2 33 console.log(1, ...[2, 3, 4], 5)4 // 1 2 3 4 55 [...document.querySelectorAll('div')]6 // [<div>, <div>, <div>] 主要⽤于函数调⽤的时候，将⼀个数组变为参数序列 123456781 function push(array, ...items) {2 array.push(...items);3 }4 function add(x, y) {5 return x + y;6 }7 const numbers = [4, 38];8 add(...numbers) // 42 ES6 允许为函数的参数设置默认值 1234561 function log(x,...