杂谈: Vue3.0 Pre-Alpha 源码导读

5号凌晨,尤雨溪公布了Vue3源代码。

源码地址:https://github.com/vuejs/vue-next

vue-next,顾名思义,下一个Vue。它的status是Pre-Alpha,解释一下,产品发布周期的一个版本,一般是在alpha之前发布。也有人叫Development Release、Technical Preview(技术预览版)等。

功能非常不完善,有时候会有较严重的BUG出现,因为它是整个软件发布周期中的第一个阶段,所以它的名称是"Pre-Alpha",希腊字母中的第一个字母alpha前面加上Pre表示alpha之前。

也就是说这次公布的是预览版,正式版可能要等到明年,才能与大家见面。

话不多说接下来我们谈谈变化部分

Typescript

Vue3.0使用 TypeScript 重构,如果你还在犹豫是否去了解 TypeScript,这就是你最好的理由,相信我你会爱上他。

Proxy

Vue2.x 中,实现数据的可响应,需要对 Object和 Array两种类型采用不同的处理方式。 Object类型通过 Object.defineProperty将属性转换成 getter/setter,这个过程需要递归侦测所有的对象 key,来实现深度的侦测。

观测 Array对象的变化,需要对 Array原型上几个改变数组自身的内容的方法做了拦截,这种模式一般称为代理原型。(原理不再此做过多的阐述

Vue3.0实现方式是通过 ES6提供的 Proxy API,相比旧的 definePropertyAPI ,Proxy可以代理数组&对象。

reactivity

Vue3 项目结构采用了 lerna 做 monorepo风格的代码管理,稍微介绍下什么是monorepo。

之前项目迭代更新的时候,通常的做法是把一个大的codebase拆成一些独立的package或是module,再将这些功能独立的package分别放入单独的repository中进行维护。可以简单地称这种方式为multiple repositories。

而monorepo则是一种相反的做法,它提倡将所有的相关package都放入一个repository来管理。

这样比较显著的特征是项目中会有个 packages/的文件夹。

Vue2.x的版本响应系统,数据观测的核心代码都放在了** observer**中。

Vue3.0 reactive.ts文件,它提供了reactive函数,该函数实现响应式数据观测。

packages 目录导读

├── compiler-core ------------------------------- 参照之前的Vue2.X entry-runtime.js 运行时构建的入口,不包含模板(template)到render函数的编译器
├── compiler-dom ---------------------------------- 参照之前的Vue2.X entry-runtime-with-compiler.js 独立构建版本
├── reactivity ------------------------------ 响应式系统 数据观测核心代码
├── runtime-core ---------------------------------- 与平台无关的运行时代码,Virtual-dom  Vue component相关代码
├── runtime-dom ------------------------------  针对浏览器的 runtime 相关代码
├── runtime-test ----------------------------------为了测试而写的轻量级 runtime
├── server-renderer ----------------------------------- SSR
├── shared ----------------------------------- 可忽略
├── vue ----------------------------------- 用于构建「完整构建」版本,引用了上面提到的 runtime 和 compiler
├── global.d.ts ----------------------------------- 不解释

更多的源码细节后续更新。

原文链接:segmentfault.com

上一篇:hashcat
下一篇:VUE里实现通过点击显示多行或单行文本的需求(类似查看更新评论)

相关推荐

  • 🙋Hanjst汉吉斯特改进+enSafeExpression安全表达式等

    Hanjst汉吉斯特模版语言及模版引擎,近期持续改进升级。 这次改进主要是增加了对安全输出表达式兼容,由于涉及到对软件开发过程中的效率和软件运行效率的平衡和取舍,所以多写了几句,以描述这个权衡利弊对...

    13 天前
  • 🔥手写大厂前端知识点源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    2 个月前
  • 🔥前端面试大厂手写源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    2 个月前
  • (源码分析)为什么 Vue 中 template 有且只能一个 root ?

    引言 今年,疫情并没有影响到各种面经的正常出现,可谓是络绎不绝(学不动...)。然后,在前段时间也看到一个这样的关于 Vue 的问题,为什么每个组件 template 中有且只能一个 root? 可能...

    2 个月前
  • 项目总结 - 构建vue cli3.0+express项目

    简介:本篇是记录搭建流程,不过多叙述,搭建的细节,主要以前端为主,项目是主要是为了重构前端代码,后端代码完全复用,还会有篇主要讲node项目的搭建 项目背景: 开发环境前后端同时实现热加载...

    2 年前
  • 项目代码的格式化统一配置 Prettier & ESLint

    以前没时间过eslint,每次项目vscode 编辑器的eslint插件就关掉eslint,老项目都没注意过相关的代码规范,这次新项目加入进去实践下! Question 1. 三个插件功自动有...

    2 年前
  • 面试还问redux?那我从头手撸源码吧(中间件篇)

    昨天的文章手写了一版redux的核心源码(https://segmentfault.com/a/1190000016799698),redux库除了数据的状态管理还有一块重要的内容那就是中间件,今天我...

    2 年前
  • 阿贾克斯XMLHttpRequest文件上传

    Sedat Başar(https://stackoverflow.com/users/739315/sedatba%c5%9far)提出了一个问题:Upload File With Ajax Xml...

    2 年前
  • 防止重定向XMLHttpRequest

    Zim(https://stackoverflow.com/users/30609/zim)提出了一个问题:Prevent redirection of Xmlhttprequest,或许与您遇到的问...

    2 年前
  • 防抖与节流(源码学习)

    最近自己撸了一个轮播图,在点击切换的时候,为了寻求更好的用户体验,引入了节流,在此记录对源码的学习过程 源码来源:underscore(https://github.com/jashkenas/und...

    2 年前

官方社区

扫码加入 JavaScript 社区