面试官问：Vue3 对比 Vue2 有哪些变化？

,内容混杂用法 + 原理 + 使用小心得，建议收藏，慢慢看。,整体来看，变化不大，只是名字大部分需要 + on，功能上类似。使用上 Vue3 组合式 API 需要先引入；Vue2 选项 API 则可直接调用，如下所示。,常用生命周期表格如下所示。,Tips： setup是围绕beforeCreate和created生命周期钩子运行的，所以不需要显式地去定义。,Vue3 支持了多根节点组件，也就是fragment。,Vue2中，编写页面的时候，我们需要去将组件包裹在<div>中，否则报错警告。,Vue3，我们可以组件包含多个根节点，可以少写一层，niceeee ！,Vue3 提供 Suspense组件，允许程序在等待异步组件时渲染兜底的内容，如 loading ，使用户体验更平滑。 使用它，需在模板中声明，并包括两个命名插槽：default和fallback。Suspense确保加载完异步内容时显示默认插槽，并将fallback插槽用作加载状态。,真实的项目中踩过坑，若想在 setup 中调用异步请求，需在 setup 前加async关键字。这时，会受到警告async setup() is used without a suspense boundary。,解决方案：在父页面调用当前组件外包裹一层Suspense组件。,Vue3 提供Teleport组件可将部分DOM移动到 Vue app之外的位置。比如项目中常见的Dialog组件。,Vue2 是 选项式API（Option API），一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期函数等），导致代码的可读性变差，需要上下来回跳转文件位置。Vue3 组合式API（Composition API）则很好地解决了这个问题，可将同一逻辑的内容写到一起。,除了增强了代码的可读性、内聚性，组合式API 还提供了较为完美的逻辑复用性方案，举个，如下所示公用鼠标坐标案例。,解决了 Vue2 Mixin的存在的命名冲突隐患，依赖关系不明确，不同组件间配置化使用不够灵活。,Vue2 响应式原理基础是Object.defineProperty；Vue3 响应式原理基础是 Proxy。,Object.defineProperty,基本用法：直接在一个对象上定义新的属性或修改现有的属性，并返回对象。,Tips： writable 和 value 与 getter 和 setter 不共存。,搬运 Vue2 核心源码，略删减。,那 Vue3 为何会抛弃它呢？那肯定是有一些缺陷的。,主要原因：无法监听对象或数组新增、删除的元素。 Vue2 方案：针对常用数组原型方法push、pop、shift、unshift、splice、sort、reverse进行了hack处理；提供Vue.set监听对象/数组新增属性。对象的新增/删除响应，还可以new个新对象，新增则合并新属性和旧对象；删除则将删除属性后的对象深拷贝给新对象。,Tips： Object.defineOProperty是可以监听数组已有元素，但 Vue2 没有提供的原因是性能问题，具体可看见参考第二篇 ~。,Proxy,Proxy是ES6新特性，通过第2个参数handler拦截目标对象的行为。相较于Object.defineProperty提供语言全范围的响应能力，消除了局限性。但在兼容性上放弃了（IE11以下）,局限性,基本用法：创建对象的代理，从而实现基本操作的拦截和自定义操作。,搬运 Vue3 的源码 reactive.ts 文件,以 baseHandlers.ts 为例，使用Reflect.get而不是target[key]的原因是receiver参数可以把this指向getter调用时，而非Proxy构造时的对象。,Vue3 相比于 Vue2 虚拟DOM 上增加patchFlag字段。我们借助Vue3 Template Explorer来看。,渲染函数如下。,注意第 3 个_createElementVNode的第 4 个参数即patchFlag字段类型，字段类型情况如下所示。1 代表节点为动态文本节点，那在 diff 过程中，只需比对文本对容，无需关注 class、style等。除此之外，发现所有的静态节点，都保存为一个变量进行静态提升，可在重新渲染时直接引用，无需重新创建。,Vue3 的 cacheHandler可在第一次渲染后缓存我们的事件。相比于 Vue2 无需每次渲染都传递一个新函数。加一个click事件。,渲染函数如下,搬运 Vue3 patchChildren 源码。结合上文与源码，patchFlag帮助 diff 时区分静态节点，以及不同类型的动态节点。一定程度地减少节点本身及其属性的比对。,patchUnkeyedChildren 源码如下。,patchKeyedChildren源码如下，有运用最长递增序列的算法思想。,以nextTick为例子，在 Vue2 中，全局 API 暴露在 Vue 实例上，即使未使用，也无法通过tree-shaking进行消除。,Vue3 中针对全局 和内部的API进行了重构，并考虑到tree-shaking的支持。因此，全局 API 现在只能作为ES模块构建的命名导出进行访问。,通过这一更改，只要模块绑定器支持tree-shaking，则 Vue 应用程序中未使用的api将从最终的捆绑包中消除，获得最佳文件大小。受此更改影响的全局API有如下。,内部 API 也有诸如 transition、v-model等标签或者指令被命名导出。只有在程序真正使用才会被捆绑打包。,根据 尤大 直播可以知道如今 Vue3 将所有运行功能打包也只有22.5kb，比 Vue2 轻量很多。,Vue3 提供的createApp默认是将 template 映射成 html。但若想生成canvas时，就需要使用custom renderer api自定义render生成函数。,Vue3 由TS重写，相对于 Vue2 有更好地TypeScript支持。,列举一些 Vue3 配套产物，具体Composition API新语法可见官方迁移文档，参考中有链接~ 。