《Vue.js设计与实现》-框架设计概览-Vue.js3的设计思路

声明式地描述 UI

Vue.js采用模板的方式来描述UI，但它同样支持使用虚拟DOM来描述UI。虚拟DOM要比模板更加灵活，但模板要比虚拟DOM更加直观。

import { h } from "vue";
export default {
  render() {
    return h("h1", { onClick: handler }); //虚拟DOM
  },
};

h 函数的作用是让我们编写虚拟 DOM 变得更加轻松

初识渲染器

虚拟 DOM 是一个用来描述真实 DOM 的 javascript 对象，渲染器则是把虚拟 DOM 渲染为真实 DOM 的工具；

渲染器 renderer 有两个参数，一个是 vnode（虚拟 DOM 对象），一个是 container（真实 DOM 元素，作为挂载点）

renderer(vnode,document.body)

组件的本质

组件并不是真实的 DOM，而是一组 DOM 元素的封装，虚拟 DOM 也可以描述组件；

Vue.js中的有状态的组件就是使用对象结构来表达的。

模板的工作原理

编译器的作用其实就是将模板编译为渲染函数

.vue 文件中<template>就是将要编译的模板内容，在打包程序编译以后，会将模板内容编译成渲染函数并添加到<script>标签块的组件对象上；

.vue 文件最终在浏览器中运行的代码是下面这样的：

export default {
  data() {
    /**/
  },
  methods: {
    handles: () => {
      /**/
    },
  },
  render() {
    return h("div", { onClick: handler }, "click me");
  },
};

Vue.js 是各个模块组成的有机整体

组件的实现依赖于渲染器，模板的编译依赖于编译器，并且编译后生成的代码时根据渲染器和虚拟DOM的设计决定的，因此Vue.js的各个模块之间是互相关联、互相制约的，共同构成一个有机整体。

渲染器需要去寻找更新变化的内容，而每次更新一点内容都需要在整个虚拟 DOM 对象中去寻找更新点，这样对渲染器的压力比较大，所以编译器在编译的阶段需要标记哪些字段是动态的，哪些是静态的，这样渲染的时候就能高效找到更新点；