关于前端:简略介绍Vue3之新特性

vue3.0 是在 2.0 的根底上重大优化调整后的降级版本，比方：其响应式和 Composition Api 等等。

此文章重点介绍 Vue 3 中一些罕用性能 API 及其应用：

要点

1. 重写双向绑定
2. 优化 Vdom
3. Vue3 Fragment
4. Vue3 Tree shaking
5. 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