了解Vue 3.0

MV*模式

MVC模式

M指模型（Model）,是后端传递的数据；

V指视图（View），是用户看到的页面；

C指控制器（Controller），是页面业务逻辑。

MVVM模式

M指模型（Model）,是后端传递的数据；

V指视图（View），是用户看到的页面；

VM指视图模型（View-Model)，是页面业务逻辑。将模型转化为视图，将视图转化为模型。
![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传](https://img-home.csdnimg.cn/i

Vue.js 3.0的新变化

1.重构响应式系统

Vue.js 2.x 利用Object.defineProperty()方法侦察对象的属性变化，该项目的缺点

• 性能较差
• 在对象上新增属性是无法被侦测的
• 改变数组的length属性是无法被侦测的

Vue.js 3.0 重构了相应系统，使用 Proxy 替换 Object.defineProperty。Proxy被称为代理，它的Proxy优势如下：

• 性能更优异
• 可直接监听数组类型的数据变化
• 监听的目标为对象本身，不需要像 Object.defineProperty 一样遍历每个属性，有一定的性能提升
• Proxy 可拦截 apply、ownKeys、has 等13种方法，而 Object.defineProperty 不行

2.更好的性能

Vue.js 3.0 重写了虚拟DOM的实现，并优化了编译模板，提升了组件的初始化速度，更新的性能提升1.3~2倍，服务器端渲染速度提升2-3倍。

3.tree-shaking 支持

Vue.js 3.0 只打包真正需要的模块，删除掉无用的模块，从而减小了产品发布版本的大小。而在Vue.js 2.x 种，很多用不到的模块也会被打包进来。

4.组合式API

Vue 3.0 中引用的基于函数的组合API。在引用新的API之前，Vue还有其他替代方案，它们提供了诸如mixin、HOC（高阶组件）、作用域插槽之类的组件之间的可复用性，但是所有方法都有其自身的缺点，因此它们并未被广泛的使用。

选项式API的缺点：

• 一旦应用程序包含一定数量的mixins，就很难维护。开发人员需要访问每个mixin，以查看数据来自哪个mixin。
• HOC模式不适用于.vue 单文件组件，因此在Vue开发人员中不被广泛推荐或使用。
• 作用域插槽的内容会进行封装到组件中，但是开发人员最终拥有许多不可复用的内容，并在组件模板中放置了越来越多的插槽，导致数据来源不明确。

组合式API的优势：

• 由于API是基于函数的，因此可以有效地组织和编写可重用的代码。
• 将共享逻辑分离为功能来提高代码的可读性。
• 可以实现代码分离
• 在Vue应用程序中更好地使用TypeScript

5.Teleport传送

Teleport 是一种能够将模板移动到DOM中Vue应用程序之外得其他位置得技术。像 modals 和toast 等这样得元素，如果嵌套在Vue 的某个组件内部，那么处理嵌套组件的定位、z-index 样式就会变得非常困难。很多情况下，需要将它与Vue应用的DOM完全剥离，管理起来会容易很多，此时就需要用到Teleport。

6.fragment碎片

Vue 2.x 的 Vue 文件必须有一个唯一的根节点，Vue 3.0 将不再限于模板中的单个根节点，可以有多个根节点。

7.更好的TypeScript支持

必须有一个唯一的根节点，Vue 3.0 将不再限于模板中的单个根节点，可以有多个根节点。

7.更好的TypeScript支持

Vue 3.0 使用 TypeScript 编写的库，结合使用支持 Vue3.0 的 TypeScript 插件，还可以拥有类型检查、自动补全等功能。