文章目录
- Vue3
- 1. 介绍 intro
- 2. 渲染机制 Rendering Mechanism
- 3. How & when to use Render functions
- 4. Compiler & Renderer API
- 5. Creating a Mount function
- 6. Implementing a Patch Function
- 7. Intro to Reactivity
- 8. Building Reactivity from Scratch
- 9. Building the Reactive API
- 10. Creating a Mini Vue
- 11. The Composition API
- 12. Code organization
- 13. Logic Reuse
- 14. A Composition API Example
- 15. Parting Thoughts
Vue3
学习视频 做的笔记
1. 介绍 intro
什么是 DOM
全程为:Document Object Model
为什么会有虚拟 DOM
因为搜索和更新真实的 DOM 会很慢
虚拟DOM 是用 javascript 对象来表示 dom 的一种方式
渲染函数初识
我们写的 template
首先会通过 vue
处理成渲染函数,渲染函数返回虚拟 DOM
当组件中的数据更新之后,会重新执行渲染函数,返回新的虚拟 DOM
然后进行新旧对比,并高效更新 DOM
Vue 三大核心模块
概览图如下:
来分开介绍:
-
响应式模块
-
编译器模块
-
渲染模块
- 渲染阶段
- 挂载阶段
- 补丁阶段
组件的执行过程
-
首先,模板编辑器将
html
转化为render
函数
-
然后使用响应式模块,初始化响应对象
-
然后再渲染模块中,进入渲染阶段 ,这将调用
render
函数,它引用了响应对象模块,观察响应对象的变化,render
函数返回一个虚拟dom
的节点
-
接下来,在挂载阶段,调用
mounted
函数,使用虚拟节点
创建web
页面
-
最后,如果我们正在被监视响应对象发生任何变化,那么渲染器将再次调用
render
函数,创建一个新的虚拟dom
节点,新的虚拟 dom
和旧的虚拟dom
发送到补丁函数中,然后根据需要,更新到我们的网页。
2. 渲染机制 Rendering Mechanism
虚拟 DOM
的好处
-
它让组件的渲染逻辑完全的从真实的
dom
中解耦,并且让他更直接的在其他的环境中重用框架的运行时比方说允许开发者创建自定义的渲染方案,目标不仅仅是浏览器,还有 iOS、Android,也可以使用 API 创建自定义的渲染器,直接运行到 WebGL ,而不是 DOM
在 vue3 中,自定义渲染器API
成为了一等公民 -
提供能力,以编程的方式,构造、检查、克隆以及操作 所需的
DOM
结构
渲染函数
vue2
以及 vue3
的 渲染函数如下图所示
其中的区别
h 函数
的第二个参数变成了扁平对象
h 函数
全局导入
3. How & when to use Render functions
平常写一个渲染函数的方式如下:
那么,一些指令,比方说 v-if
,v-for
,是怎么实现的呢
v-if
利用三元表达式去处理
如果是 v-else-if
的话,也是嵌套三元表达式即可
v-for
通过 map
方法遍历数组,返回新的 VNode
数组
v-slot
当想要设计嵌套组件的时候,如果使用模板的话就会变得比较复杂,渲染函数就可以轻松些了
整体代码如下
<script src="https://unpkg.com/vue@next"></script>
<style>
.mt-4 {
margin: 10px;
}
</style>
<div id="app"></div>
<script>
const { h, createApp } = Vue
const Stack = {
render() {
const slot = this.$slots.default ? this.$slots.default() : []
return h(
'div',
{
class: 'stack'
},
slot.map((child) => {
// attrs
return h('div', { class: `mt-${this.$attrs.size}` }, [child])
})
)
}
}
const App = {
components: {
Stack
},
template: `
<Stack size="4">
<div>hello</div>
<Stack size="4">
<div>hello</div>
<div>hello</div>
</Stack>
</Stack>
`
}
createApp(App).mount('#app')
</script>
页面中的结构如下