跟尤雨溪一起解读Vue3源码笔记- Vue Mastery

• P1.介绍
  • 1.什么是DOM或文档对象模型？
    • 
    •  HTML映射到一系列DOM节点，我们可以使用JavaScript进行操作

    • let item = document.getElementsByTagName("h1")[0]
      item.textContent = "New Heading"

  • 2.虚拟DOM
    • 网页网页可以有很多节点，这意味着DOM树可以有数千个节点。这就是为什么会有Vue框架，来帮我们干这些重活，并进行大量的JavaScript调用。搜索和更新上千个DOM节点很明显会很慢，于是就有了虚拟DOM的东西，虚拟DOM是表示DOM的一种方式
  • 3.vue核心模块
    • 三个核心模块，响应式模块、编译器模块和渲染模块。
    • 响应式模块
      • 允许我们创建JavaScript响应对象并可以观察其变化，当使用这些对象代码运行时，它们会被跟踪， 如果响应对象发生变化，它们可以再以后运行
    • 编译器模块
      • 它知道如何获取HTML模板，并将它们编译成渲染函数，可能发生在运行时的浏览器，但在构建Vue项目时更常见，这样浏览器就可以只接收渲染函数
    • 渲染模块
      • 包含在网页上渲染的三个不同阶段
        • 渲染阶段
          • 将调用render函数，返回一个虚拟DOM节点
        • 挂载阶段
          • 使用虚拟DOM节点，并调用DOM API来创建网页
        • 补丁阶段
          • 将旧的虚拟节点和新的虚拟节点比较，只更新网页变化的部分
    • 页面大致的渲染过程
      • 首先，模板编译器将HTML，转换为一个渲染函数
      • 然后，初始化响应对象，使用响应式模块
      • 接下来，在渲染模块中，我们进入渲染阶段，调用render函数，它引用了响应对象
      • 观察响应式对象，render函数返回一个虚拟DOM节点
      • 接下来，在挂载阶段调用mount函数，使用虚拟DOM节点创建web页面
      • 最后，如果我们响应对象发生任何变化，正在被监视，渲染器再次调用render函数，创建一个新的虚拟DOM节点，新的和旧的虚拟DOM节点，被传递到补丁函数中，然后根据需要更新我们的网页
• P2.渲染机制
  • 1.虚拟DOM
    • 它让组件渲染逻辑，完全从真实DOM中解耦，并让它更直接的重用框架运行时，在其他环境中。vue允许第三方开发人员，创建自定义渲染解决方案，目标不仅仅是在浏览器，也包括IOS和Android等原生环境，也可以用API，创建自定义渲染器，直接渲染到WebGL
    • 它提供了能力，以编程方式构建、检查、克隆，以及操作所需的DOM结构，在实际返回渲染引擎之前，你可以做到利用JavaScript的全部能力
  • 2.渲染函数

     

    • 
    • 较vue2代码的升级
      • 扁平化
      • h函数的全局导入
• P3.如何和何时使用渲染
  • 编写可重用功能组件时更常见

  • 
    <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 = {
            props: ['size'],
            render() {
                const slot = this.$slots.default ? this.$slots.default() : [];
                return h(
                    "div",
                    { class: "stack" },
                    slot.map((child) => {
                        return h("div", { class: `mt-${this.$props.size}` }, [
                            child,
                        ]);
                    })
                );
            },
        };
    
        const App = {
            template: `
              <Stack :size="4">
                <div>hello</div>
                <Stack :size="4">
                  <div>hello</div>
                  <div>hello</div>
                  <Stack :size="4">
                  <div>hello</div>
                  <div>hello</div>
                </Stack>
                </Stack>
              </Stack>
            `,
            components: {
                Stack,
            },
        };
        createApp(App).mount("#app");
    </script>
    

• P4. 编译器&渲染API
  • 左边是源模板，右边是生成渲染函数代码
    • options

      • hoistStatic 是否确实从渲染函数中提升，以便在每个渲染器上重用它

        • 好处

          • 避免重新创建对象，然后扔掉

          • 在模式算法中，两个节点在严格平等的情况下，我们可以跳过它，因为知道它永远不会改变

      • 通过补丁和数组能为运行时提供足够的信息，忽略哪些已经被编译器推断永远不会改变的props

        • 

        • 每次被更新或被diff时，我们需要看下onClick，以确保它不会改变