vue4.0新特性,vue3.2新特性

　　本文主要介绍3.0版本的强升级点的特性的详细说明。有需要的朋友可以借鉴一下，希望能有所帮助。祝大家进步很大，早日升职加薪。溴

目录

　　 I、组合API:组合API/注入API II、自定义渲染器API (VUE 2.x)架构问题I II、更高级的组件片段组件悬疑组件IV、更好的TS支持V、更快的开发体验(vite开发构建工具)VI、按需编译、比VUE 2.x小(摇树)VII。性能比2.x快1.2 ~ 2倍优化diff算法静态改善渲染阶段(渲染阶段是指生成虚拟dom树的阶段)事件监听缓存减少创建组件实例的开销摘要：

一、Composition API: 组合API/注入API

　　与vue2.x相比，Vue3.0在架构上进行了升级，性能大幅提升。组合API的出现使得组件抽取和逻辑代码重用更加灵活。

　　说到这里的代码组织，传统的网页是html/css/javascript(结构/风格/逻辑)的分离。Vue/react通过组件化把紧密相关的结构/风格/逻辑放在一起，有利于代码的维护。

　　Composition api更进一步，专注于JavaScript(逻辑)部分，把逻辑相关的代码放在一起，紧密且有利于代码维护。

　　在vue2的组件中，使用了Option API样式(data/methods/mounted)组织的代码，会使逻辑分散。例如，当我们完成一个计数器函数时，我们必须在数据中声明变量，在方法中定义响应函数，在mounted中初始化变量。如果我们在一个函数很多、代码量很大的组件中，要维护这样一个函数，你需要反复切换到data/methods/mounted中对应的位置，然后修改代码。

　　在vue3中，使用设置功能。以下与count相关的逻辑放在counter.js文件中，与todo相关的逻辑放在todos.js中

　　从导入useCounter。/计数器

　　从导入useTodo。/托多斯

　　setup(){

　　设{ val，todos，addTodo }=useTodo()

　　设{count，add}=useCounter()

　　返回{

　　瓦尔，托多斯，阿德托多，

　　计数，相加，

　　}

　　}

　　在我看来，这就是Composition API最大的特点，基于函数的代码组织方式。同时，它可以使代码更容易重用。

　　说到重用，组合API的方式要比mixin好很多。你可以清楚的看到组件使用的数据和方法来自哪个模块，而mixin进入组件的函数往往让我们很困惑这个函数来自哪个mixin。

二、自定义渲染API（Custom Renderer API）

vue2.x架构问题

　　起初，vue2.x支持在浏览器中运行，在浏览器的dom上渲染。随着vue的流行，出现了weex和myvue。

　　Weex:移动跨平台方案，需要渲染到移动设备上。Weex是在最初的vue项目中编写的。缺点是把原来的vue项目做大了，不是通用的解决方案。Myvue:用在小程序上，需要在小程序框架上渲染。Myvue是单独的fork源码来改的，缺点也很明显。myvue中的vue版本从分叉的那一刻起就和正式版不一致。Vue2.x项目架构对这种到不同平台的渲染不是很友好，vue3.0引入了自定义渲染API来解决这个问题。

　　我们先来看看vue2和vue3在词条写作上的区别：

　　//vue2

　　从“vue”导入Vue

　　从导入应用程序。/App.vue

　　新Vue({=h(App)})。$ mount(“# app”)

　　//vue3

　　来自“vue”的const { createApp }

　　从导入应用程序。/src/App

　　createApp(应用程序)。挂载(( #app )

　　由vue正式实现的CreateApp将为我们的模板映射生成html代码。但如果不想渲染生成html，而是想渲染生成canvas等非html代码，就需要使用自定义渲染器API来定义自己的render渲染生成函数。

　　//可以自己实现一个createApp，比如渲染到canvas。

　　从“”导入{ createApp }。/runtime-render ；

　　从导入应用程序。/src/App ；//根组件

　　createApp(应用程序)。挂载( # app )；

　　通过自定义渲染器API，完美解决了weex、myvue等方案的问题。只需重写createApp。

三、更先进的组件

Fragment组件

　　Vue2不允许这样写。组件必须有一个从动节点。现在你可以这样写了。vue会为我们创建一个虚拟碎片节点。

　　模板

　　divHello/div

　　divWorld/div

　　/模板

　　这样写有什么好处？首先，如果根节点不是必需的，就没有必要创建它，这减少了节点的数量。第二，片段节点是虚拟的，不会出现在DOM树中。

Suspense组件

　　焦虑

　　模板

　　悬浮组件/

　　/模板

　　模板#回退

　　装货.

　　/模板

　　/悬念

　　在暂停组件完全呈现之前，将显示备用内容。如果是异步组件，悬念可以等待组件下载，或者在设置函数中执行一些异步操作。

四、更好的TS支持

　　Vue2不适合ts，因为它的Option API风格。Options是一个简单的对象，而ts是一个类型系统和面向对象的语法。两者略有不匹配。

　　在vue2和ts结合的具体实践中，vue组件要用vue-class-component来加强，脚本要支持TypeScript decorator，用vue-property-decorator来添加更多具有vue特征的decorator。最后，ts的组件编写和js有很大不同。

　　在vue3中，对defineComponent函数进行了裁剪，使组件能够更好地利用ts下的参数类型推断。在组合api的代码风格中，代表API是ref和reactive，它们也很好地支持类型声明。

　　从“vue”导入{ defineComponent，ref }

　　const Component=define Component({

　　道具：{

　　成功：{ type: String }，

　　学生：{

　　type:Object as PropTypelt；学生gt；

　　必填：真

　　}

　　},

　　setup() {

　　常数年=ref(2020)

　　const month=refltstring numbergt(9)

　　月值=9 //好的

　　const result=year . value . split()//=gt；类型“number”上不存在属性“split”

　　});

五、更快的开发体验（vite开发构建工具）

　　当使用webpack作为开发和构建工具时，npm run dev必须等待一段时间。项目越大，等待的时间越长。热重装页面会有几秒钟的延迟，但是如果用vite作为vue3的开发构建工具，npm run dev会秒开，热重装会非常快。这样的开发体验真的很爽，我拒绝等待。

　　vite的原理还是用浏览器支持导入关键字。启动项目最初是在没有webpack构建工具的情况下构建的。浏览器直接请求路由对应的代码文件，代理服务器编译返回单个文件。如果请求的文件中导入了其他文件，类似地，浏览器继续发送请求，代理服务器返回。这样npm run dev就不需要编译了，实时请求实时编译。

六、按需编译，体积比Vue2.x更小（Tree shaking）

　　在vue3中，可以参考vue的功能如下。如果你的项目不使用watch，编译时会掉树抖。

　　从“vue”导入{ computed，watch，next tick }；

　　使用ES6模块系统导入/导出。

七、性能比2.x快1.22倍

diff算法的优化

　　在vue2中，虚拟dom是完全比较的。

　　在vue3中，添加了静态标签PatchFlag。创建vnode时，将根据vnode的内容是否可以更改，向其添加静态标记PatchFlag。Diff，只比较带有PatchFlag的节点。PatchFlag是一个类型，比如一个可变的文本节点，它将被添加一个静态标签，其PatchFlag的枚举值是TEXT。这样，diff时，只需比较文本内容即可。比较的内容比较少。Patch还有动态类、动态样式、动态属性、动态键属性等枚举值。

render阶段的静态提升（render阶段指生成虚拟dom树的阶段）

　　在vue2中，一旦检查到数据更改，将重新创建重新渲染组件，并重新创建所有vnode以形成新的vdom树。

　　在vue3中，对于不参与更新的vnode，会静态提升，只创建一次，重新渲染时直接重用。

　　静态提升可以理解为保存第一次更新没有涉及到的vnode节点的引用。当重新渲染新的vdom树时，只需获取它们的引用，不需要重新创建它们。

事件侦听缓存

　　在vue2中，我们写的@click=onClick 也被当作一个动态属性，diff的时候也要进行比较。但我们知道它不会改变，比如@click=onClick2 并绑定其他值。

　　在vue3中，如果事件不会改变，onClick会被缓存(类似于静态提升达到的效果)，节点不会被打上PatchFlag(即不需要更新的节点)。这样，在render和diff阶段，事件侦听属性都可以节省不必要的性能消耗。

　　我曾经维护过一个有巨大dom树的页面。因为有那么多节点，也有那么多节点不需要参与更新。在使用vue2的情况下，大量的性能消耗在render和diff这两个阶段。如果当时有vue3，我想性能会优化很多。

减少创建组件实例的开销

　　vue2.x每创建一个实例，data，props，computed都在这上面暴露，都是Object.defineProperty定义的，这部分操作相当耗时。

　　基于vue3.0中的代理，减少了创建组件实例的性能开销。

总结：

　　其他的，数据监控方式改为Proxy，消除了Object.defineProperty现有的限制(比如不能检测新的属性添加)，提供了更好的性能。Vue3解决了vue2的一些问题，比如大型应用的性能和不友好的ts支持，自定义渲染API解决了架构的问题。在vue3的基础上实现weex框架会好很多。也做了很多优化，Composition API让代码组织得更好。Vite开发和构建工具让开发体验更好，树摇让包更小，性能更好。总的来说，vue3还是很不错的，很强大，带来了很多非常好的新功能。以上是Vue3.0强升级点功能的详细内容，更多关于Vue3.0升级功能的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。