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

• 
•  HTML映射到一系列DOM节点，我们可以使用JavaScript进行操作

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

• 网页网页可以有很多节点，这意味着DOM树可以有数千个节点。这就是为什么会有Vue框架，来帮我们干这些重活，并进行大量的JavaScript调用。搜索和更新上千个DOM节点很明显会很慢，于是就有了虚拟DOM的东西，虚拟DOM是表示DOM的一种方式

• 三个核心模块，响应式模块、编译器模块和渲染模块。
• 响应式模块
  • 允许我们创建JavaScript响应对象并可以观察其变化，当使用这些对象代码运行时，它们会被跟踪， 如果响应对象发生变化，它们可以再以后运行
• 编译器模块
  • 它知道如何获取HTML模板，并将它们编译成渲染函数，可能发生在运行时的浏览器，但在构建Vue项目时更常见，这样浏览器就可以只接收渲染函数
• 渲染模块
  • 包含在网页上渲染的三个不同阶段
    • 渲染阶段
      • 将调用render函数，返回一个虚拟DOM节点
    • 挂载阶段
      • 使用虚拟DOM节点，并调用DOM API来创建网页
    • 补丁阶段
      • 将旧的虚拟节点和新的虚拟节点比较，只更新网页变化的部分
• 页面大致的渲染过程
  • 首先，模板编译器将HTML，转换为一个渲染函数
  • 然后，初始化响应对象，使用响应式模块
  • 接下来，在渲染模块中，我们进入渲染阶段，调用render函数，它引用了响应对象
  • 观察响应式对象，render函数返回一个虚拟DOM节点
  • 接下来，在挂载阶段调用mount函数，使用虚拟DOM节点创建web页面
  • 最后，如果我们响应对象发生任何变化，正在被监视，渲染器再次调用render函数，创建一个新的虚拟DOM节点，新的和旧的虚拟DOM节点，被传递到补丁函数中，然后根据需要更新我们的网页

• 它让组件渲染逻辑，完全从真实DOM中解耦，并让它更直接的重用框架运行时，在其他环境中。vue允许第三方开发人员，创建自定义渲染解决方案，目标不仅仅是在浏览器，也包括IOS和Android等原生环境，也可以用API，创建自定义渲染器，直接渲染到WebGL
• 它提供了能力，以编程方式构建、检查、克隆，以及操作所需的DOM结构，在实际返回渲染引擎之前，你可以做到利用JavaScript的全部能力

• 
• 较vue2代码的升级
  • 扁平化
  • h函数的全局导入

 
<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: `
          
            
hello
            
              
hello
              
hello
              
              
hello
              
hello
            
            
          
        `,
        components: {
            Stack,
        },
    };
    createApp(App).mount("#app");
script>

• options

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

    • 好处

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

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

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

    • 

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