vue3.0是在2.0的根底上重大优化调整后的降级版本，比方：其响应式和Composition Api等等 。
此文章重点介绍Vue 3 中一些罕用性能API及其应用：
要点
- 重写双向绑定
- 优化Vdom
- Vue3 Fragment
- Vue3 Tree shaking
- Vue 3 Composition Api
更多具体内容，请微信搜寻“前端爱好者“， 戳我 查看 。
重写双向绑定
vue2 Object.defineProperty()
- 基于Object.defineProperty()实现
Object.defineProperty(person,'age',{ //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值 get(){ console.log('有人读取age属性了') return number }, //当有人批改person的age属性时，set函数(setter)就会被调用，且会收到批改的具体值 set(value){ console.log('有人批改了age属性，且值是',value) number = value }}) - 重写数组某些办法
vue3 基于Proxy
proxy与Object.defineProperty(obj, prop, desc)形式相比有以下劣势：
- 丢掉麻烦的备份数据
- 省去for in 循环
- 能够监听数组变动
- 代码更简化
- 能够监听动静新增的属性；
- 能够监听删除的属性 ；
- 能够监听数组的索引和 length 属性；
let proxyObj = new Proxy(obj,{ get : function (target,prop) { return prop in target ? target[prop] : 0 }, set : function (target,prop,value) { target[prop] = 888; }}) 优化Vdom
在Vue2中,每次更新diff,都是全量比照,Vue3则只比照带有标记的,这样大大减少了非动静内容的比照耗费
patch flag 优化动态树
<span>Hello world!</span><span>Hello world!</span><span>Hello world!</span><span>Hello world!</span><span>{{msg}}</span><span>Hello world!</span><span>Hello world! </span> 编译后
export function render(_ctx，_cache，$props，$setup，$data，$options){return (_openBlock(),_createBlock(_Fragment,null，[_createvNode( "span", null,"Hello world ! "),_createvNode( "span",null，"Hello world! "),_createvNode( "span"，null，"Hello world! "),_createvNode( "span", null，"Hello world! "),_createVNode("span", null，_toDisplaystring(_ctx.msg)，1/* TEXT */)，_createvNode( "span", null，"Hello world! "),_createvNode( "span", null，"Hello world! ")]，64/*STABLE_FRAGMENT */))新增了 patch flag 标记
这个标记就叫做 patch flag（补丁标记）
patch flag 的弱小之处在于，当你的 diff 算法走到 _createBlock 函数的时候，会疏忽所有的动态节点，只对有标记的动静节点进行比照，而且在多层的嵌套下仍然无效。
只管 JavaScript 做 Vdom 的比照曾经十分的快，然而 patch flag 的呈现还是让 Vue3 的 Vdom 的性能失去了很大的晋升，尤其是在针对大组件的时候。
Vue3 Fragment
反对多个根标签
根结点能够反对多个标签。vue3在这些标签里面新增了个虚构标签.
<template> <div>12</div> <div>23</div></template>同时反对render JSX 写法
render() { return ( <> {this.visable ? ( <div>{this.obj.name}</div> ) : ( <div>{this.obj.price}</div> )} <input v-model={this.val}></input> {[1, 2, 3].map((v) => { return <div>{v}-----</div>; })} </> );},同时新增了Suspense teleport 和 多 v-model 用法
Vue3 Tree shaking -- 随引所用
Tree Shaking 指的就是当我引入一个模块的时候，我不引入这个模块的所有代码，我只引入我须要的代码，这就须要借助 webpack 外面自带的 Tree Shaking 这个性能来帮咱们实现。
简略来讲，就是在放弃代码运行后果不变的前提下，去除无用的代码
在Vue2中，无论咱们应用什么性能，它们最终都会呈现在生产代码中。次要起因是Vue实例在我的项目中是单例的，捆绑程序无奈检测到该对象的哪些属性在代码中被应用到
而Vue3源码引入tree shaking个性，将全局 API 进行分块。如果你不应用其某些性能，它们将不会蕴含在你的根底包中
就是比方你要用watch 就是import {watch} from 'vue' 其余的computed 没用到就不会给你打包缩小体积。
Vue 3 Composition Api
Setup 语法糖式编程
例如 ref reactive watch computed toRefs toRaws