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

2019-10-11 admin

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,相比旧的 defineProperty API ,Proxy 可以代理数组&对象。

reactivity

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

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

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

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

image.png

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 ----------------------------------- 不解释

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

[转载]原文链接:https://segmentfault.com/a/1190000020648412

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77124.html

文章标题:杂谈: Vue3.0 Pre-Alpha 源码导读

相关文章
vue-awesome-swiper的使用以及API整理
一、先说一个看关于vue-awesome-swiper的一个坑 vue项目的package.json中显示的<span style=“color: orange;”>“vue-awesome-swiper”: “^2.5.4”&...
2018-04-26
JavaScript游戏之连连看源码分享
JavaScript游戏之连连看源码 下载地址:JavaScript游戏之连连看源码 解压密码:www.javascriptcn.com ...
2015-11-12
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:"#list", data:{ gridData: "", }, ...
2017-03-20
三步搞定vue在vscode的环境配置问题
1. vscode基础开发插件 vscode-icons 图标美化 Debugger for Chrome 调试 Beautify 代码格式化 Prettier 代码格式化 ESLint 代码规范 JavaScript (ES6) cod...
2017-12-25
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: <style> #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
最细致的vue.js基础语法 值得收藏!
介绍 前段时间接触到一个库叫做Vue.js, 个人感觉很棒,所以整理了一篇博文做个介绍。 Vue读音/vju:/,和view类似。是一个数据驱动的web界面库。Vue.js只聚焦于视图层,可以很容易的和其他库整合。代码压缩后只有24kb。 ...
2017-03-21
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
mpvue 小程序如何自定义tabBar,不使用navigateTo跳转,模拟redirectTo跳转
原生tabBar tabBar: { "list": [ { pagePath: "pages/index/main", iconPath: &...
2018-05-25
VuePress 快速踩坑
最近有个开源项目非常火,那就是尤小右开发的 VuePress,VuePress 可以让您非常方便的在 Markdown 文档中编写 Vue 代码,并且 VuePress 对编译后的 HTML 文件做了一些针对搜索引擎的优化。另外 VuePr...
2018-04-27
在 mpvue 使用 echarts 小程序组件
具体操作 下载 echarts-for-weixin 。 把其 ec-canvas 目录移动到 mpvue 项目的 static 目录下。 对 ec-canvas/ec-canvas.js 进行小调整,考虑提 pr 到 ec-c...
2018-03-11
回到顶部