Mochenghualei

摘要： 1.背景：今天看Vue3文档，发现一个网格案例中有一段 reduce的写法和作用如下： arr.reduce((o, key) => ((o[key] = 1), o), {}) // 目的 ==> 将 [ "name","power"] 转换为 { name:1,power:1 } 发现这里的回调 阅读全文

摘要： 思路：查看vue官方文档：风格指南（重点关注AB级）、最佳实践（生产部署、性能、访问、安全） 回答范例 从编码风格、性能、安全等方面说几条： 1.编码风格方面： 命名组件时使用“多词"风格避免和HTML元素冲突； 使用”细节化"方式定义属性而不是只有一个属性名； 属性名声明时使用“驼峰命名"，模板或 阅读全文

摘要： 缓存组件使用keep-alive组件，这是一个非常常见且有用的优化手段，vue3中keep-alive有比较大的更新，能说的点比较多； 思路 1.缓存用keep-alive，阐述它的作用与用法； 2.使用细节，例如缓存指定/排除、结合router-view和transition； 3.组件缓存后更新 阅读全文

摘要： 回答范例 1.创建过程自上而下，挂载过程自下而上；即： parent created child created child mounted parent mounted 2.之所以会这样是因为Vue创建过程是一个递归过程，先创建父组件，有子组件就会创建子组件，因此创建时先有父组件再有子组件；子组件 阅读全文

摘要： 思路分析： 1.先看computed，watch两者定义，列举使用上的差异； 2.列举使用场景上的差异，如何选择； 3.使用细节、注意事项； 4.vue3变化； 回答范例： 1.computed定义：接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴 阅读全文

摘要： 答题思路： 1.nextTick是做什么的？ 2.为什么需要它呢？ 3.开发时何时使用它？ 4.下面介绍一下如何使用nextTick 5.原理解读，结合异步更新和nextTick生效方式 回答范例： 1.定义：nextTick是等待下一次DOM更新刷新的工具方法； 2.为什么使用：Vue有个异步更新 阅读全文

摘要： 思路分析： 1.给出结论，key的作用是用于优化patch性能； 2.key的必要性； 3.实际使用方式； 4.总结：可从源码层面描述一下vue如何判断两个节点是否相同； 回答范例： 1.key的作用主要是为了更高效的更新虚拟DOM； 2.vue在patch过程中判断两个节点是否是相同节点是key是 阅读全文

摘要： 回答范例 1.很多时候，我们需要将给定匹配模式的路由映射到同一个组件，这种情况就需要定义动态路由； 2.例如，我们可能有一个User组件，它应该对所有用户进行渲染，但用户ID不同。在Vue Router中，我们可以在路径中使用一个动态字段来实现，例如：{path:'/users/:id'，compo 阅读全文

摘要： 说一说你了解的Vue3新特性 先说说API相关：官方文档展出的重要更新： Composition API SFC Composition API 语法糖 (script setup) Teleport组件 Fragments组件 Emits选项 自定义渲染器 SFC State-driven CSS 阅读全文

摘要： 你了解Diff算法吗？ 思路 1.diff算法是干什么的 2.它的必要性 3.它何时执行 4.具体执行方式 5.拔高：说一下vue3中的优化 回答范例 1.概念：Vue中的diff算法称为patching算法，它由Snabbdom修改而来，虚拟DOM要想转化为真实DOM就需要通过patch方法转换； 阅读全文