文章目录

• Vue3
• • 1. 介绍 intro
  • • 什么是 DOM
    • 为什么会有虚拟 DOM
    • 渲染函数初识
    • Vue 三大核心模块
    • 组件的执行过程
  • 2. 渲染机制 Rendering Mechanism
  • • 虚拟 `DOM` 的好处
    • 渲染函数
  • 3. How & when to use Render functions
  • • v-if
    • v-for
    • v-slot
  • 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/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>

页面中的结构如下

4. Compiler & Renderer API

Vue3 模板编译器

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