vue3初探(持续更新)

2020.4.17尤雨溪微博宣布Vue3.0 进入beta阶段了,我们也简单做个研究,尝试查看vue3的使用和底层实现和vue2有何不同

源码

仓库地址

1
git clone git@github.com:vuejs/Vue-next.git

我们先看看 Vue3 的基础 API 都有哪些?

1
2
3
4
5
6
7
8
9
10
11
12
13
const {
createApp,
reactive, // 传入普通对象,返回响应式数据对象
ref, // 把基本类型,创建一个响应式的数据对象,因为基本类型特殊
toRefs, // 将响应式数据对象转换为单一响应式对象 // ...toRef(state) 把对象展开,方便html里去适用
isRef, // 判断某值是否是引用类型,是不是ref生成的
computed, // 创建计算属性
watch, // 创建 watch 监听
// 生命周期钩子
onMounted,
onUpdated,
onUnmounted
} = Vue;

effect 副作用函数,响应式对象修改时候触发

vue2 vue3
beforeCreate setup
created setup
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeDestroy onBeforeUnmount
destroyed onUnmounted
errorCaptured onErrorCaptured

源码目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- 编译器 compiler
- compiler-core 核心
- compiler-dom 针对浏览器的编译逻辑
- sfc 单文件
- ssr
- 运行时 runtime

- runtime-core
- inject
- lifecycle
- watch
- directive
- component
- runtime-dom
- class
- style
- runtime-test 测试环境仿真。方便测试,在浏览器外测试比较方便

- reactivity 响应式逻辑
- template-explorer 模板解析器
- server-renderer
- shared 公用方法
- size-check
- Vue

参考资料

Vue-3-Cheat-Sheet

请我喝杯咖啡吧~