1. 1. Vue3初始化的流程
    1. 1.1. Vue3初体验:hello world!
    2. 1.2. Vue3变化和设计原理
    3. 1.3. 源码刨析:初始化流程
    4. 1.4. 造轮子之旅:手写Vue3初始化
    5. 1.5. 简历

Vue3初始化的流程

Vue3初体验:hello world!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="app">
<h1>{{title}}</h1>
<h1>{{title2}}</h1>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data(){
return {
title: 'Hello world'
}
},
setup() {
const state = Vue.reactive({
title2: 'Vue3, hello!'
})
return state;
}
})
app.mount('#app')
</script>

Vue3变化和设计原理

Vue3设计理念
函数的方式
类型支持更好
Tree shaking
api 简化
易用性
一致性
自定义指令
sync修饰符和v-modul
复用性
composition-api
性能优化
响应式系统
编译器优化
扩展性
自定义渲染器
独立响应式

源码刨析:初始化流程

Vue
打包入口
依赖
runtime-dom
依赖runtime-core
CreateApp
renderer.createApp
createRenderer
render
hydrat
createApp
createAppAPI
render
patch
processComponent
mountComponent
instance
初始化组件
setupComponent(instance)
属性初始化
方法初始化
状态初始化
数据响应式
初始化界面及更新机制建立
setupRenderEffact()
mount
update
diff

造轮子之旅:手写Vue3初始化

造轮子
基本结构
createApp
app.mount
兼容Vue2
setup
app.setupState
data
app.data
proxy
扩展性
抽象自定义渲染器
让用户传入当前平台节点操作
createRenderer(nodeOpts)
数据响应式
Vue3和Vue2区别
Vue3
proxy
Vue2
defineProperty
array
arr.prototype = arrayMethods
7个变更方法
具有变更通知的能力
优缺点
API层面
动态属性新增和删除
Vue.set/delete
性能表现
初始化速度慢
保存依赖关系
watcher
dep
V3兼容性
Vue2.7
reactive
实现数据响应式
effect
建立依赖关系
track()
建立映射关系
trigger()
触发依赖关系
VDom
js对象,能够描述视图
精确的定点更新
oldVnode,newVnode

简历