Vue3的新特性

RFC机制

Vue3 的一个新特性和代码无关,而是 Vue 团队的开发的工作方式
Vue 的新语法或者新功能的讨论,都会在 github 中公开征求意见,邀请社区所有的人一起讨论,RFC的引入,让 Vue 的生态更加开放。

响应式系统

vue2的响应式机制是基于 Object.defineProperty 这个 API 来实现的,defineProperty是拦截具体的某个属性
vue3 中的响应式基于 Proxy,proxy 才是真正的代理

Object.defineProperty和 proxy 实现响应式的区别

(1)defineProperty 是拦截具体某个属性,proxy 是真正的代理
(2)defineProperty 对不存在的属性无法拦截,所以在vue2中的所有数据都必须要在data中声明,当数据类型是数组时,并不会改变指向,所以不能拦截数组长度的修改,需要额外的$set 等API
(3) proxy 可以监听更多的数据类型,比如 set map 这些 vue2做不到

自定义渲染器

(1)vue2中的所有模块都是揉在一起的,导致不好扩展的问题
(2)Vue3 中选择拆包的方式,使用流行的 monorepo 的管理方式,响应式、编译和运行时都全部独立
(3)vue3 的组织架构中,响应式独立了出来,vue2的响应式只服务于 vue, vue3 的响应式和 vue 解耦了,可以在node和react 使用它的响应式,甚至在你想使用 vue3开发小程序、小游戏等,不用全部fork vue 的代码,只需要实现平台的渲染逻辑就可以

全部模块使用 TS 重构

(1)类型系统带来了更方便的提示
(2)类型系统让代码更加健壮

Cmposition API

(1) 所有的 API 都是 import 引入的,用到的功能都会 import 进来,对于 Tree-shaking 很友好
(2) 代码书写过程中,不再上下反复横跳,可以把一个功能模块的 methods data 等放在一块书写,维护更轻松。
(3)代码方便复用,可以把一个功能所有的 methods data 封装在一个独立的函数中,复用代码肥肠容易

新的组件

vue3 还内置了 Fragment、Teleport、Suspense 三个新组件
Fragment:不在要求有一个唯一的根节点,清除了很多无用的占位div
Teleport: 允许在组件渲染在别的元素内,主要是在开发弹窗组件的时候很有用
Sunpense:异步组件:更方便开发有异步请求的组件

新一代的工程化工具 Vite

vite 主要是提升开发的体验
(1)传统的 webpack 打包,根据你的import 依赖的逻辑,形成一个依赖图,调用对应的处理工具,把整个项目全部打包后,放在内存中再启动调试
(2)vite 是在调试环境下,不需要全部的于大宝,只是把你首页以来的文件,依次通过网络的请求去获取,整个开发体验得到巨大提升

总结

(1) 新的 RFC 的机制让所有人都可以参与 Vue的新语法的讨论
(2) 工程化的vite 工具带来了更丝滑的调试体验
(3) 对于产品的最终效果来看,vue3的性能更高、体积更小
(4) 对于普通开发者来说,composition Api 的组合语法更好的组织代码的形式,全新的响应式系统基于 proxy,可以独立使用
(5)内置了新的组件
(6)对于vue的二次开发来说,自定义的渲染器让开发跨端应用时更加得心应手
(7)对于 Vue 的源码维护者,全部模块使用 TS重构,带来更好的可维护性


截屏2023-09-20 18.32.04.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 快速开始 通过 CDN: 通过 Codepen[https://codepen.io/yyx990803/pen/...
    AAA前端阅读 3,996评论 0 1
  • Vue3的变化 官网地址: https://v3.cn.vuejs.org/guide/migration/int...
    JiaoMengYuan阅读 43,824评论 0 38
  • 一、检测机制 vue2中基于Object.defineProperty的observer实现,vue3中则基于Pr...
    周五_xy阅读 5,840评论 0 6
  • # Vue3的改进及特点 1.性能的提升:打包大小减少 41%,初次渲染快 55%,更新快 133%,内存使用减少...
    华尔街的主导曲阅读 20,208评论 1 3
  • 1、响应系统的变动 由原来的Object.defineProperty 的getter 和 setter,改变成为...
    老Daaa阅读 10,283评论 0 3

友情链接更多精彩内容