春风得意马蹄疾
一日看尽长安花

Vue3.0新特性

Vue2.0数据响应

我们知道在Vue3.0之前的对象数据响应式的原理是Object.defineProperty(),数组的响应式原理是拦截数组的7个方法(包括push、pop、shift、unshift、splice、sort、reverse)。这种方式存在的问题是对于对象,我们无法直接检测到属性的新增和删除;对于数组我们无法检测到直接去修改数组下标对应的内容以及利用length修改数组的长度。

Vue3.0数据响应

Vue3.0的数据响应的原理是利用Proxy实现的。Proxy在ES2015规范中被正式发布,它在目标对象之前架设一层"拦截"。外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制们可以对外界的访问进行过滤和改写。

特点

  • Proxy可以直接监听对象而非属性,因此对象的属性新增和删除也可以被监听
  • Proxy可以直接监听数组的变化。因此数组直接修改下标的内容以及长度也可以被监听
  • Proxy有多达13种拦截方法,不限于apply、deleteProperty、has等

diff算法

相比于Vue2.0中diff算法优化在于增加了静态分析,将节点分为静态节点和非静态节点,静态节点指的是没有绑定响应式数据,Vue2.0diff算法的单位是组件,在Vue3.0中,将组件的渲染模板根据非静态节点划分为一个个block块,diff算法的单位是一个个block,渲染只与动态内容的多少有关,与静态内容无关。无论层级嵌套多深,它的动态节点都直接与Block根节点绑定,无需再去遍历静态节点

允许一个组件可以有多个根节点

利用Fragment实现了一个组件可以有多个根节点。Fragment'碎片'虚拟元素,并不会渲染带html中。

<template>
    <div>Hello</div>
    <div>World</div>
</template>

性能提升

  • 重写了虚拟dom的实现(且保证了兼容性,脱离模板的渲染需求旺盛)
  • 编译模板的优化
  • 更高效的组件初始化
  • update性能提高1.3-2.0倍
  • SSR速度提高了2-3倍

Tree shaking support

Tree shaking 更好的支持,很多时候,我们并不需要vue提供的所有功能,在Vue2.0并没有方式排除掉,但是3.0都可能做成了按需引入

Like
Like Love Haha Wow Sad Angry
赞(0) 打赏
未经允许不得转载:栗子纪blog » Vue3.0新特性
分享到: 更多 (0)
0 0 vote
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments

创作不易,打赏一下作者买瓶洗发露

支付宝扫一扫打赏

微信扫一扫打赏

0
Would love your thoughts, please comment.x
()
x