vue3.0 的新特性

vue3新特性：

一、使用Proxy替换Object.defineProperty，重构响应式系统，使用Proxy优势：

1、可直接监听数组类型的数据变化

2、监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升

3、可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行

4、直接实现对象属性的新增/删除

proxy的缺点：

1、es6的proxy不支持低版本浏览器（IE11）

2、会针对IE11出一个特殊版本进行支持

二、源码使用ts重写，更好的类型推导

其实TypeScript并不是一门新的语言，它是 JavaScript 类型的超集，typeScript那并不是一个新语言，可以理解为加强JavaScript的buff，TypeScript最大的优势源于强大的类型系统，还有就是在编写代码的时候就可以检测出我们可能因为粗心造成的不必要的错误。

所以建议学习一下ts：

为什么要学习TypeScript ?

• 未来趋势，目前来看发展，和应用趋势很快
• vue3.0发布后，基本就离不开ts了
• 使用 TypeScript 可以帮助我们防止在编写 JavaScript 代码时因为数据类型的转换造成的意想不到的错误。提前帮我们发现代码出现错的风险。
• 团队成员使用 JavaScript 时很容易瞎写，不受规范约束。但是如果使用TypeScript那大家都不得不遵守规范。
• TypeScript 紧跟 JavaScript 的发展，ES7 、ES8、ES9 相关语言的新特性都支持，比浏览器支持的速度更快。

什么样的项目需要TypeScript ？

• 团队多人开发的大项目
• 开源项目
• 企业对代码有高质量要求的项目

三、虚拟DOM新算法（更快、更小）

四、提供了composition api，为更好的逻辑复用与代码组织

首先，我们要知道由于vue3.0语法跟vue2.x的语法几乎是完全兼容的，所以你还是按照vue2.x的写法也是可以的，但是我们最好能学习一些新的API。

所以涉及到了一个新的东西vite：

vite的安装使用

vite仓库地址 https://github.com/vuejs/vite 上面有详细的安装使用教程，按照步骤安装即可。

composition-api解决了什么问题

使用传统的option配置方法写组件的时候问题，随着业务复杂度越来越高，代码量会不断的加大；由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护非常的复杂，同时代码可复用性不高，而composition-api就是为了解决这个问题而生的。

语法糖介绍

compositon-api提供了一下几个函数

• reactive
• watchEffect
• computed
• ref
• toRefs
• 生命周期的hooks

这些我就不在这里介绍了，这个我还在学习中，之后学到了再去记录。。。

五、自定义渲染器（app、小程序、游戏开发）

Vue3.0中支持 自定义渲染器 (Renderer)：这个 API 可以用来自定义渲染逻辑。

1.自定义渲染器的原理

渲染器是围绕 Virtual DOM 而存在的，在 Web 平台下它能够把 Virtual DOM 渲染为浏览器中的真实 DOM 对象，为了能够将 Virtual DOM 渲染为真实 DOM，渲染器内部需要调用浏览器提供的 DOM 编程接口，下面罗列了在出上一章中我们曾经使用到的那些浏览器为我们提供的 DOM 编程接口：

document.createElement / createElementNS：创建标签元素。

document.createTextNode：创建文本元素。

el.nodeValue：修改文本元素的内容。

el.removeChild：移除 DOM 元素。

el.insertBefore：插入 DOM 元素。

el.appendChild：追加 DOM 元素。

el.parentNode：获取父元素。

el.nextSibling：获取下一个兄弟元素。

document.querySelector：挂载 Portal 类型的 VNode 时，用它查找挂载点。

六、Fragment，模板可以有多个根元素

vue-fragments

我们知道vue2.x在模版里面跟元素div只能有一个，如果写多个，在执行渲染的时候就会报错，

vue3.0引入了fragments，让其可以有多个跟元素；

vue-fragments可以作为一个插件安装到你的Vue项目中

import { Plugin } from "vue-fragments";
Vue.use(Plugin);

该插件注册了一个全局VFragment组件，将其用作组件模板中的包装器，类似于React片段的语法：

<template>
  <v-fragment>
    <div>Fragment 1</div>
    <div>Fragment 2</div>
  </v-fragment>
</template>

这个是查资料查的，还没有在项目中用过，各位不吝赐教，我哪里是有问题的，帮忙指摘。