一：vue3介绍
尤大：首先新的js语言特性在主流浏览器中的受支持水平。其次是当前代码库中随时间推移逐渐暴露出来的一些设计和架构问题
总结起来就是：
1，利用新的语言特性（es6）
2，解决架构问题
哪些变化
1，速度更快
2，体积减少
3，更易维护
4，更接近原生
5，更易使用
速度更快/性能优化：
- 重写了虚拟Dom实现，提高了渲染性能。
- 编译模版优化，编译器优化，减少了运行时开销
- 更高效的组件初始化
- undate性能提高1.3～2倍
- SSR速度提高2～3倍
体积更小
通过webpack的tree-shaking功能，将无用模块“剪辑”，仅打包需要的。
- 对开发人员，能够对vue实现更多其他的功能，而不必担忧整体体积过大
- 对使用者，打包出来的包体积更小了
- 有利于降低首屏加载时间
更易维护
composition Api
- 可与现有的options API一起使用
- 灵活的逻辑组合与复用逻辑，同时提高了可维护性和可读性。
- vue3模块可以和其他框架搭配使用
更好的ts支持
vue3是基于ts编写的，可以享受到自动的类型定义提示，提供了更强大的类型推断和检查
编译器重写
更接近原生
可以自定义渲染API
更易使用 响应式api暴露出来，轻松识别组件重新渲染原因
源码管理
整个源码都是通过monorepo的方式维护的，根据功能将不同的模块拆分到packages目录下面不同的子目录中。
二：Vue3新增特性
- framents ---》组件支持多个根节点,用来承载多个字元素的虚拟组件，它的作用是解决在vue2中，使用v-for迭代元素时需要添加一个包装元素的问题。
- Teleport ---》一种能够将我们的模板移动到DOM中的vue app之外的其他位置的技术。通过teteport，可以在组件的逻辑位置写模板代码，然后在vue应用范围之外渲染它
- composition Api ---》组合式api，更加容易维护代码，将相同功能的变量进行一个集中式的管理
- createRenderer ---》通过createRenderer，能够构建自定义渲染器，将vue的开发模型扩展到其他平台
- suspense --》它的作用是实现延迟加载和错误处理。在组件中加入suspense，可以让异步组件渲染出加载状态，并且如果异步组件加载时出现错误，可以处理这些错误。
- watchEffect ---》监听响应式数据的变化，在数据变化时自动执行函数。
- toRefs --》将一个响应式数据对象的属性转换为响应式数据引用。
三：非兼容变更
组件
- 只能使用普通函数创建功能组件
functional属性在单文件组件(SFC)- 异步组件现在需要
defineAsyncComponent方法来创建
移除API
- keyCode支持作为v-on的修饰符
- off和$once实例方法
- 过滤filter
- 内联模板attribute
- $destroy实例方法
四：vue高频题目
一，什么是Composition API？他解决了什么问题？
vue3引入的一种新的API，它提供了一种新的方式来组织和重用组件的逻辑。
解决的问题：
1，在大型复杂组件中，使用options API可能导致逻辑分散在不同的生命周期钩子和属性中，难以维护和阅读。
2，逻辑重用方面，Options API依赖Mixins，但是Mixins存在命名冲突，来源不明等问题
vue3通过ref，reactive和computed等函数，允许开发者将相关逻辑组合在一起，提高代码的可维护性和可读性。
二：ref和reactive的使用
ref和reactive是vue3的两个核心函数，用于创建响应式数据。
1，ref：用于创建一个响应式的基本数据类型。使用ref（）函数创建，通过.value访问和修改，但是在模板中不需要。
是通过Object.defineProperty()给value属性添加getter，setter来实现响应式。一般用来处理基本数据类型，也可以处理复杂的，内部自动将对象转换为reactive的代理对象。
2，reactive: 用于创建一个响应式的对象。使用reactive（）函数创建，直接访问和修改属性值。
通过proxy对目标对象中的所有属性动态地进行数据劫持，并通过Reflect操作对对象内部数据来实现响应式
一般用来处理复杂数据类型，会实现递归深度响应式
**三： vue3中实现自定义指令 **
钩子函数：
beforeMount： 在指令挂载到DOM之前调用
mounted： 在指令挂载到DOM之后调用
beforeUpdate： 指令所在组件的VNode更新之前调用
updated： 指令所在组件的VNode更新之后调用
beforeUnmount：在指令从 DOM 卸载之前调用
unmounted：在指令从 DOM 卸载之后调用
四：vue3中如何进行组件通信 props和emit provide和inject来实现跨层级组件通信。在父组件中使用provide方法提供数据，在子组件中使用inject方法注入数据。
五：说说vue3的新特性
1，新增组合API
setup，reactive，ref，toRefs--》把响应式数据对象中的所有属性变成ref对象，常用于结构响应式对象属性。
2，生命周期变化
3，响应式原理变化
4，更好的支持TS
5，新增内置组件 Fragment（片段），Teleport（瞬移），Suspense（不确定）
6，新的脚手架工具vite
7，可以设置多个根节点
六：Vue3的响应式原理
数据代理+数据劫持+发布订阅模式
Proxy+Reflect+WeakMap
在初始化vue实例时，通过Proxy进行数据代理，用Proxy对象来代理目标对象，并且对目标对象中的所有属性动态地进行数据劫持，动态地指定一个getter，setter，并通过Reflect操作对象内部数据。
当Proxy对象属性或Proxy数组元素发生变化时，会触发Proxy属性的setter方法，然后通过Reflect操作目标对象属性，同时触发它Dep实例的notify方法进行依赖分发，通知所有依赖的Watcher实例执行内部回调函数。
最后会触发renderWatcher回调，会重新执行render函数，重新对比新旧虚拟DOM，重新渲染页面。
当读取Proxy对象属性时，会触发Proxy属性的getter方法，然后触发它Dep实例的depend方法进行依赖收集。
参考网站：mp.weixin.qq.com/s?__biz=MzU…
article.juejin.cn/post/722283…
