Vue3新特性全面剖析

本文主要是介绍Vue3新特性全面剖析，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一款框架诞生需要的阶段

查看版本: npm view vue versions

• 开发
• alpha版：内部测试版 α
• beta版：公开测试版 β
• rc版：Release Candidate（候选版本）
• stable版：稳定版

npm i vue@lasted:下载的是vue2

• vue2
• vuex3
• vue-router3
• element-ui 2

npm i vue@next：下载的是vue3

• vue3
• vuex4
• vue-router4
• element-plus 1
• npm i vuex@next vue-router@next element-plus

vue3的安装使用

• 一、安装vue3：npm i vue@next
• 二、安装vue3版本的项目
• 三、安装vue-router、vuex
• 四、安装less@3、less-loader@7
• 五、配置vue.config.js,与vue2相同

vue3与vue2的十大区别

• 版本号不同
• 引用的vuex/vue-router版本不同
• vue3的APP.vue的《template》 中支持多个根节点

区别一：==vue3中推崇使用函数式编程==:各种创建实例，都调用函数来创建，我们从vue中解构出各种各样的函数来使用 

区别二.Performance [pəˈfɔːməns]

• 重写了虚拟DOM的实现（跳过静态节点，只处理动态节点）
• update性能提高1.3~2倍
• SSR速度提高了2~3倍

区别三:Tree shaking [ˈʃeɪkɪŋ] 可以将无用模块“剪辑”，仅打包需要的)【webpack新版本的】

区别四 Fragment ['frægmənt] 不再限于模板中的单个根节点[文档碎片]

区别五 <Teleport> [ˈtelɪpɔːt] 以前称为<Portal> [ˈpɔːtl]，译作传送门,可以把组件内部的部分内容挂载到除#app的容器中(<Teleport to="#fotter">)，

  <div id="app"></div>
  <div id="footer"></div>
 <Teleport to="#footer"> 你好,世界</Teleport>

区别六<Suspense> [səˈspens]可在嵌套层级中等待嵌套的异步依赖项,嵌套一个异步组件，可以在获取到数据之前加载loading效果

区别七:TypeScript更好的TypeScript支持

这篇关于Vue3新特性全面剖析的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！