ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

Vue3新特性全面剖析

2021-12-20 22:33:08  阅读:133  来源: 互联网

标签:npm vue 区别 Vue3 特性 next 剖析 版本 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支持

标签:npm,vue,区别,Vue3,特性,next,剖析,版本,vue3
来源: https://blog.csdn.net/qq_63358859/article/details/122050549

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有