父子组件通信兄弟组件通信祖孙 后代 通信非关系组件通信 父子组件通信父组件 –> 子组件 props子组件 –> 父组件 $emit ref 兄弟组件通信 EventBus 12345678910111213141516171819class EventBus { constructor() { this.callbacks = {}; } $on(name, fn) { this.callbacks[name] = this.callbacks[name] || []; this.callbacks[name].push(fn); } $emit(name, args) { if (this.callbacks[name]) { this.callbacks[name].forEach((cb) => cb(args)); } }}Vue.prototype.$bus = new Event ...

生命周期Vue中实例 在创建 –> 销毁 创建 初始化数据 编译template 挂载DOM 渲染 更新渲染 卸载 beforeCreate：实例创建之初 初始化插件 created组件已经创建完成 异步请求获取 DOM 并没有生成 beforeMount：组件挂载之前 mounted：组件挂载之后 异步请求获取 render dom 更新 页面变化 beforeUpdate：数据发生变化 更新之前 updated：数据发生变化更新后 beforeDestroy： 实例销毁前 destroyed：销毁后 activated： keep-alive 组件激活 deactivated：keep-alive 组件停用 errorCaptured： 捕获实例的错误 双向绑定 v-model双向绑定大多用于表单事件，通过监听使用者输入的事件来更新内容。 现阶段大部分工作在App.vue上，template与普通写法一致，js写法： 123456789export default { name: 'app', data() { ret ...

异步编程有哪些实现方式 回调函数：存在问题，回调地狱、代码耦合度高、不利于代码维护 Promise:链式调用 generator：同步顺序书写 函数控制权转移回来 自动执行机制 co函数 async/await：generator promise 自动执行的语法糖 内部自带执行器 await 等待 Promise 变成 resolve 异步逻辑转化为同步顺序 自动执行 this与对象原型prototypehoisting状态提升在程序执行前，编译器先由上到下逐行将代码转为机器可读的命令，然后再执行编译后的指令。 实现一个函数，可以返回输入参数是否为质数？ 123456789101112131415function isPrimeNumber(m) { if (m <= 1 || m % 1 !== 0) { return false; } var n = 2; while (n < m) { if (m % n === 0) { return false; } else ...

两数之和123456789function twoSum(nums, target) { for (let i = 0; i < nums.length; i++) { let num = nums[i]; let targetIndex = nums.indexOf(target - num); if (targetIndex !== -1 && targetIndex !== i) { return [i, targetIndex]; } }} 日期格式化12345678910111213141516171819202122// 格式化日期类型,fmt格式可选择function dateFormat(fmt, date) { let ret; let opt = { "Y+": date.getFullYear().toString(), // 年 "M+": (date.getMont ...

响应式数据根据数据类型【数组和对象】进行不同处理。 对象内部通过defineReactive方法，使用Object.defineProperty()监听数据属性的get进行数据依赖收集，再通过set完成数据更新。 数组则通过重写数组方法实现。扩展7个变更方法（push/pop/shift/unshift/splice/reverse/sort），通过监听这些方法收集依赖和派发更新。 多层对象通过递归实现监听，Vue3使用proxy实现响应式数据。响应式流程：defineReactive定义响应式数据；给属性增加dep收集对应的watcher；等数据变化进行更新。dep.depend——get取值，依赖收集；dep.notify——set设置，通知视图更新。 性能优化点：1. 对象层级过深；2. 不需要响应式数据不放在data；3. Object.freeze可以冻结数据。 Teleport 将组件的渲染内容传送到 DOM 的其他位置，解决布局样式隔离问题。内容渲染在目标 DOM，但逻辑仍属于原组件树（保持响应式、生命周期、事件等）Vue3 中将 Teleport 作为 ...

醉是流年作者：吴华锦 烛光曳曳竹影移，庭前寒露满纱窗。冷月沁出珍珠泪，银桂飘得十里香。 灿若星辰美若仙，凌波飞渡有河洛。长发飘然惊鱼貌，粉颊带雪玲珑心。 江南烟雨春，湘西山色好。临风但曰雅，新亭铺盏茶。儿童游戏闹，浣洗言谈欢。渐午炊烟起，回家吃饭去。 月洒金辉镶碧树，花落银盘挂玉帘。 山花已盛开，好景时光裁。暖阳须明日，君卿直可待。 看他悠然自得，胸中自有丘壑，世事纷然无涯，不如归家喝茶。天也晴，水也清，风光正好，可惜，行人太匆匆，为哪般？纵使急速有千里，穿林起风声，不敌年华易老，人面婆娑，不如举起一杯清浅，相邀歌。 小城故事多，夕阳剪影，华灯初上，夜色宁静。好山好水好风景，燕雀穿空有余音，晚风轻拍美人镜，皱起鳞光催夜频。 日长夜短不足眠，窄巷深深，行人急促，摩肩接踵。欢庆后，百无聊赖，观星摘月，追踪往年。正是，良辰好景莫辜负，赏心乐事各家院，天地辽阔，不似，处处高楼遮望眼。恰逢佳节好心闲，山水同源，花开自在，艳羡路人。称病几分重，游丝不肯离，静心且静气，常翻几页书。读完我也不知道看了什么，只是看书这件事本身就很有意思。爱惜身体，早睡，早不早起看毅力，晚安。

Vue和Angular、React.js的相同点和不同点？ 与React的相同： 都使用了Virtual DOM 提供了响应式和组件化的视图组件 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。 与React的区别： 组件的响应式渲染 React的组件的数据状态发生变化时，它会以该组件为根，重新渲染整个组件子树；而Vue不只去渲染需要渲染的组件。 HTML+CSS的编写 React使用的JSX语法，将HTML、CSS和JS混写；而Vue使用的是templates模板方式，完全融合与经典的Web技术。 与Angular的区别： 与Angular 1对比，Vue的性能更加优越，Angular性能会随着watcher的增加而变慢，而且Angular中一些watcher会触发另一个更新，使得“脏检查循环”可能会运行多次。 Angular事实上必须用TypeScript来开发，而且Angular对于TS的支持非常全面，而Vue暂时对于TS的支持还在改进阶段。 Vue的体积更小，一个包含了 vuex + vue-router 的 Vue 项目 (3 ...

项目需求：1、用nodejs的socket.io写了一个简易版的聊天室（实时推送技术，无刷新实现信息实时更新，应用于在线聊天室、在线客服系统、评论系统和WebIM等） 2、根据socket.io库给出的api以及《nodejs实战》给出的demo实现了, 也只是很基础的, 但放到服务器上后会有网络延迟, 顺序不正确等问题 3、看过网上的资料, 没看到有解释很全或者投入生产环境的代码, 都是一些demo 想请教前辈, 对于一个业务开发中常用的聊天室模块: 1、应该如何去思考呢?2、整个过程会涉及到哪些知识点?3、会有哪些难点呢?(比如支持高并发啥的)4、应该注意什么呢?(比如如何测试或者啥的?) 解决方案需求分析： 实现在线聊天室的基本功能，包括显示在线用户的个人信息 用户进行实时聊天，信息推送实时更新 其他可扩展功能 技术栈分析socket.io是一个开源WebSocket库，它通过Node.js实现WebSocket服务端，同时提供客户端JS库。socket.io支持以事件为基础的实时双向通讯，可以工作在任何平台、浏览器或移动设备。 Node.js+ ...

虚拟列表：只渲染可视区域元素，通过占位容器模拟滚动条。树的特殊性：需出来层级关系、展开折叠动态变化，二者结合即为虚拟树（Virtual Tree）。 数据结构转化递归遍历树节点，转化为线性数组并记录层级、展开状态、父子关系： 12345678function flattenTree(root, level = 0, result = []) { const node = { ...root, level, expanded: false }; result.push(node); if (node.children && node.expanded) { node.children.forEach(child => flattenTree(child, level + 1, result)); } return result;} 滚动事件通过容器scrollTop动态计算当前可视区域索引： 12const startIdx = Math.floor(scrollTop / itemH ...