Vue基础面试题（三）

最新推荐文章于 2024-07-04 00:59:27 发布

弹guitar的程序员

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量1k

点赞数 13

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_56685529/article/details/139696934

版权

1.Vue3.0有什么更新

响应式原理改成了用proxy，解决了数组无法通过下标修改，无法监听到对象属性的新增和删除问题。
通过reactive定义的响应式数据是使用proxy包装的，而ref还是用的defineProperty给空对象定义一个value属性来实现响应式。
组合式api的写法，方便按需引入，打包的体积更小。
增加了静态节点标记，会标记静态节点，不对静态节点进行对比，从而增加效率。
重写了内部结构，对TypeScript的支持更加完善。
去掉了vue2.0中的 beforeCreate 和 created 两个阶段，新增了一个setup。destroyed 销毁后被重命名为 unmounted卸载后
新增组件Teleport（传送），它可以将包裹组件传送到任何指定地方，且不改变组件内部的元素父子关系（）主要应用于弹窗。

Vue 在实例初始化时遍历 data 中的所有属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。这样当追踪数据发生变化时，setter 会被自动调用。（无法监控到数组下标和长度的变化，ES5中的写法）
proxy用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等），Proxy 直接代理整个对象而非对象属性。（Proxy 可以监听数组的变化。）

相较于Object.defineProperty有着改进和优势

虚拟DOM是对DOM的抽象，这个对象是更加轻量级的对 DOM的描述，虚拟DOM本身是js对象，当组件的状态变化时，框架会生成一个新的虚拟DOM 树，框架比较新旧虚拟 DOM 树，找到其中的差异，根据差异，框架将最小化的更新应用到真实 DOM，虚拟 DOM 的主要优势在于它能够减少直接 DOM 操作的频率和复杂性，从而提高性能和开发效率。

将 JavaScript 对象表示的虚拟 DOM 转换为实际的 DOM 元素，并根据应用的状态变化高效地更新视图。

取决于具体的情况。在某些情况下，虚拟DOM的性能可能会比真实DOM差，例如，当我们的应用程序的状态变化非常频繁时。但是，总的来说，虚拟DOM的性能是比真实DOM好的。

diff 算法的核心思想是比较新旧虚拟 DOM 树（递归+双指针算法），找出差异，并生成最小的操作集合（最小化更新视图），以最有效的方式将这些差异应用到真实的 DOM 上。比较只会在同层级进行, 不会跨层级比较

首先，对比节点本身，判断是否为同一节点，如果不为相同节点，则删除该节点重新创建节点进行替换。如果节点相同（进行patchVnode），则进一步比较属性和子节点。
递归地比较和更新子节点，利用键值优化来高效地匹配和复用节点，减少不必要的 DOM 操作。
找出新旧节点属性的差异，删除旧属性中不再需要的部分，添加或更新新的属性。
如果都有子节点，则进行updateChildren，判断如何对这些新老节点的子节点进行操作。

key属性是DOM元素的唯一标识。

关注