43.Vue 组件之间的通信方式都有哪些
通过 props 传递：父组件传递数据给子组件
◼
子组件设置 props 属性，定义接收父组件传递过来的参数
◼
父组件在使用子组件标签中通过字面量来传递值
通过$emit 触发自定义事件：子组件传递数据给父组件
◼
子组件通过$emit 触发自定义事件，$emit 第二个参数为传递的数值
◼
父组件绑定监听器获取到子组件传递过来的参数
使用 ref：
◼
父组件在使用子组件的时候设置 ref
◼
父组件通过设置子组件 ref 来获取数据
EventBus：兄弟组件传值
◼
创建一个中央事件总线 EventBus
◼
兄弟组件通过$emit 触发自定义事件，$emit 第二个参数为传递的数值
◼
另一个兄弟组件通过$on 监听自定义事件
$parent 或$root：通过共同祖辈$parent 或者$root 搭建通信桥连
◼
兄弟组件 this.$parent.on('add',this.add)
◼
另一个兄弟组件 this.$parent.emit('add')
attrs 与 listeners
Provide 与 Inject
Vuex
44.你了解 vue 的 diff 算法吗？说说看
diff 算法是一种通过同层的树节点进行比较的高效算法
两个特点：
◼
比较只会在同层级进行, 不会跨层级比较
◼
在 diff 比较的过程中，循环从两边向中间比较
在 vue 中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较
当数据发生改变时，订阅者 watcher 就会调用 patch 给真实的 DOM 打补丁
通过 isSameVnode 进行判断，相同则调用 patchVnode 方法
patchVnode 做了以下操作：
◼
找到对应的真实 dom，称为
el
◼
如果都有文本节点且不相等，将 el 文本节点设置为 Vnode 的文本节点
◼
如果 oldVnode 有子节点而 VNode 没有，则删除 el 子节点
◼
如果 oldVnode 没有子节点而 VNode 有，则将 VNode 的子节点真实化后添加到 el
◼
如果两者都有子节点，则执行 updateChildren 函数比较子节点
updateChildren 主要做了以下操作：
◼
设置新旧 VNode 的头尾指针
◼
新旧头尾指针进行比较，
循环向中间靠拢
◼
根据情况调用 patchVnode 进行 patch 重复流程、调用 createElement 创建一个新
节点，从哈希表寻找 key 一致的 VNode 节点再分情况操作
45.为什么需要 Virtual Dom，和真实 DOM 的区别是什么？
DOM 很慢，其元素非常庞大，页面的性能问题，大部分都是由 DOM 操作引起的
真实的 DOM 节点，哪怕一个最简单的 div 也包含着很多属性
虚拟 DOM 优势是 diff 算法，减少 JavaScript 操作真实 DOM 的带来的性能消耗。
虚拟 DOM 最大的优势在于抽象了原本的渲染过程，实现了跨平台的能力，而不仅仅
局限于浏览器的 DOM，可以是安卓和 IOS 的原生组件，可以是近期很火热的小程序，也可以是各种 GUI
46.Vue3.0 的设计目标是什么？相比较 Vue2 来说做了哪些性能优化？
更小
◼
Vue3 移除一些不常用的 API
◼
tree-shaking，剔除无用模块，使打包的整体体积变小
更快
◼
diff 算法优化
◼
静态提升
◼
事件监听缓存
◼
SSR 优化
更友好
◼
vue3 兼顾 vue2 的 options API 同时还推出 composition API，增加了代码的逻辑组
织和代码复用能力
◼
vue3 是基于 typescipt 编写的，可以享受到自动的类型定义提示
优化方案
◼ 源码
◆ 源码管理
源码通过 monorepo 方式维护，根据功能将不同的模块拆分到 packages目录下面不同的子目录中
一些 package（reactivity 响应式库）独立于 Vue 使用，用户只想使用 Vue3
的响应式能力，可以单独依赖这个响应式库而不用去依赖整个 Vue
◆ TypeScript
Vue3 基于 typeScript 编写，提供更好的类型检查，支持复杂的类型推导
◼ 性能
◆ 体积优化
◆ 编译优化
◆ 数据劫持优化
vue2 数据劫持通过
Object.defineProperty
，不检测对象属性添加和删除
尽管 Vue 提供了 set 和 delete 实例方法，但对于用户来说，增加负担
面对嵌套层级比较深的情况下，就存在性能问题
vue3 通过
proxy
监听整个对象
Proxy 不能监听到内部深层次的对象变化，
在 getter 去递归响应式，真正访问到的内部对象才会变成响应式
◼ 语法 API
◆ 优化逻辑组织
相同功能代码编写在一块，不像 options API，各个功能的代码混成一块
◆ 优化逻辑复用
vue2:mixin 实现功能混合，多个 mixin 混合会命名冲突和数据来源不清晰
vue3:composition 将复用代码抽离出一个函数，使用的地方直接调用
47.Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的Options Api 有什么不同？
Options API(选项 API):
定义 data，methods，computed，watch共同处理页面逻辑
组件状态写在 data 属性上，方法写在 methods 属性上...
当组件变得复杂，导致对应属性的列表也会增长，这会导致组件难以阅读和理解
Composition API(组合 API)：
根据逻辑功能来组织，一个功能所定义所有 API 放一起（更加的高内聚，低耦合）
即使项目很大功能很多，我们都能快速的定位到这个功能所用到的所有 API
区别：
逻辑组织和逻辑复用：
Composition 将相关代码组织在一起，逻辑更容易地复用和测试。
更好的类型推导：
Composition 利用 TypeScript 的类型系统，提供了更好的类型推导
更直观的代码结构：
Composition 使用函数组织逻辑，使代码结构更加直观和清晰。
Composition API 对 tree-shaking 友好，代码也更容易压缩
Composition API 中没有 this，减少了 this 指向不明的情况
更好的响应式系统：
Composition 使用 reactive、ref 创建响应式数据，使得逻辑与状态
之间的关联更加明确和可追踪。
如果是小型组件，可以继续使用 Options API，也是十分友好的
48.说一下 Vue 数据响应式的原理，Vue2 和 Vue3 的有什么区别？
实现方式：
◼ Vue2：
◆
使用 Object.defineProperty()方法来劫持对象的 getter 和 setter，以此来实现
数据的响应式。
◆
对每个属性单独进行响应式转换
◆
不能监听数组的索引和长度属性的变化，无法监听新增或删除的属性。
◼ Vue3：
◆
引入了 Proxy 对象，这是一种更全面的拦截器
◆
直接代理整个对象，监听对象的所有属性变化，包括新增和删除属性，
◆
同时也支持数组的变化。使用 Proxy 可以更高效地追踪变化，且代码更简洁。
数组处理：
◼ Vue2：
◆
通过重写数组的变异方法（如 push、shift 等）来实现数组的响应式，
◆
但对于通过索引直接修改数组元素或修改数组长度的操作无法响应。
◼ Vue3：
◆
利用 Proxy 和 Reflect，能够直接代理数组
◆
可以捕获到所有形式的数组变更，包括直接修改数组元素和长度。
新增特性和 API：
◼ Vue3 引入了新的 API，如 reactive 和 ref，使得对响应式对象和基本类型值的创建
更加直观和灵活。
◼ reactive 用于创建深层次响应式对象
◼ ref 主要用于包装基本类型值或对象，使其具有响应式特性。
性能优化：
◼ Vue3 通过改进的依赖追踪系统（使用 track 和 trigger），提高了响应式的性能。
◼ 特别是在大型应用中，这些优化有助于减少不必要的更新，提升应用的整体性能。
组件内部结构：
◼ Vue3 中引入了 Composition API，这是一种新的组织和复用代码的方式，鼓励使用
函数式编程风格，与原有的 Options API 并行存在，为开发者提供了更多灵活性。
49.Vue3 中的生命周期函数的变化以及含义
setup()：
◼
beforeCreate 和 created 这两个生命周期钩子不再存在，被 setup()方法所取代。
◼
状态的初始化、事件的绑定等，都会在 setup()方法中进行配置
挂载阶段：
◼
beforeMount 和 mounted 保留，但使用 onBeforeMount 和 onMounted 定义逻辑。
◼
onBeforeMount 挂载之前调用，准备工作
◼
onMounted 挂载之后调用，挂载之后调用
更新阶段：
◼
beforeUpdate 和 updated 依然存在，但推荐使用 onBeforeUpdate 和 onUpdated。
◼
onBeforeUpdate 进行一些状态的保存或准备工作
◼
onUpdated 更新之后调用，可以进行一些操作，比如获取更新后的 DOM 状态、执行一些更新后的逻辑等。
beforeDestroy 和 destroyed 被重命名为 beforeUnmount 和 unmounted，任何组件卸载前的
清理工作，如清除定时器或解绑全局事件
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » 公司面试题总结（八）
发表评论 取消回复