简略介绍Vue3之新特性 - 服务器托管|北京服务器租用|机房托管租用|IDC托管租用|机房机柜带宽租用-价格及费用咨询

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 优化静态树

Hello world!
Hello world!
Hello world!
Hello world!
{{msg}}
Hello world!
Hello world!

编译后

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在这些标签外面新增了个虚拟标签.


 12
 23

同时支持render JSX 写法

render() {
    return (
        
            {this.visable ? (
                {this.obj.name}
            ) : (
                {this.obj.price}
            )}
            
            {[1, 2, 3].map((v) => {
                return {v}-----;
            })}
        >
    );
},

同时新增了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

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: C++面试八股文：std::array如何实现编译器排序？

某日二师兄参加XXX科技公司的C++工程师开发岗位第25面：面试官：array熟悉吗？二师兄：你说的是原生数组还是std::array? 面试官：你觉得两者有什么区别？二师兄：区别不是很大，原生数组（非动态数组）和std::array都在栈上开辟空间，初…

要点