vue3概述

官网：https://vue3js.cn/
下一代web开发方式，更快，更轻，易维护，更多的原生支持
vue3是完全兼容vue2的

vue3特性

• 创建实例的方式

          vue2以new Vue（{}）.$mount('#app')

          vue3 以Vue.createApp().mount('#app')

• Teleport

          将一个元素或者一个组件渲染到规定的节点中，可以脱离vue范围

• 自定义渲染函数
• 响应性原理改变

          vue2中用的是Object.defineProperty的getter和setter（实现拦截需要手动设置）

          vue3采用的是全新的es6语法 proxy【除了ie之外的其他浏览器】，底层采用了proxy的effect和trigger

          ie浏览器依旧采用的是Object.defineProperty

• vue3新增了全新一套功能 --组合式API--Composition API
• Fragment模板实现多个根元素

vue2升级到vue3

安装

npm install -g @vue/cli

升级

npm update -g @vue/cli

  创建vue3项目与创建vue2的方式一样，在这里选择3.x版本

 

 

  如果忘记选择vue3，创建的项目默认选择的是v2.0 ，可以使用下面命令

add vue-next

vue3 performance（性能）提升分析

• diff算法优化

　　　vue2中的虚拟dom是进行全量的对比

　　   vue3中新增了静态标记（patchFlag），只对比带有PF的节点，并且通过Flag的信息得知当前节点要对比的具体内容

地址：https://vue-next-template-explorer.netlify.app

我们看一下vue2和vue3在渲染数据时的状况

 

 

 

 

 

•  全局api分块(Tree Shaking机制)

　　Tree Shaking称为“摇树优化” ；Tree Shaking就是把无用的模块进行“剪枝”，很多没有用到的Api就不会打包到最后的包里

　　Tree Shaking的前提是所有的内容必须用 ES6 module的import

 

 

 

•  静态提升

　　vue2中无论元素是否参与更新，每次都会重新创建，然后再渲染

　　vue3中对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可

 

 

• cacheHandlers事件侦听器缓存

　　默认情况下onClick会被视为动态绑定，所以每次都会去追踪它的变化

　　但是因为是统一个函数，所以没有追踪变化，直接缓存起来复用就可以