第三章 VUE 的模块概述

声明式的 UI 描述

1. 声明式的好处在于，它直接描述结果，用户不需要关注过程。
2. Vue.js 采用模板的方式来描述 UI，但它同样支持使用虚拟 DOM 来描述 UI 。虚拟 DOM 要比模板更加灵活，但模板要比虚拟 DOM 更加直观。

VUE 的各个模块是有机整体

说明： 执行(入参) =>返回值

1. 编译器( template ) => 渲染函数
2. 渲染函数() => 虚拟 DOM vnode
3. 渲染器( 虚拟 DOM ) => 生成真实 DOM

编译器

1. VUE 模板会被 编译器 编译为渲染函数
2. 在编译阶段可对代码进行分析， 那些是动态的和静态的，打标记 patchFlag 1,2,3,4,5... 以提高渲染器的 diff 性能

渲染器

1. 渲染器的作用是，把虚拟 DOM 对象渲染为真实 DOM 元素。
2. 它递归地遍历虚拟 DOM 对象，并调用原生 DOM API 来完成真实 DOM 的创建。渲染器的精髓在于后续的更新，它会通过 Diff 算法找出变更点，并且只会更新需要更新的内容。

组件的本质

1. 组件其实就是一组虚拟 DOM 元素的封装，它可以是一个返回虚拟 DOM 的函数，也可以是一个对象，但这个对象下必须要有一个函数用来产出组件要渲染的虚拟 DOM。
2. 渲染器在渲染组件时，会先获取组件要渲染的内容，即执行组件的渲染函数并得到其返回值，也就是虚拟 DOM，称为 subtree，最后再递归地调用渲染器将 subtree 渲染出来即可

// 1、 函数封装了一组虚拟DOM
 const myComponent = function () {
   return {
     tag: 'div',
     props: {
       onClick: ()=> alert(1);
     },
     children: 'click me';
   }
 }

 // 2、组件对象
 const myComponent1 = {
   render() {
      return {
      tag: 'div',
      props: {
        onClick: ()=> alert(1);
      },
      children: 'click me';
   }
 }

编译器、渲染器都是 Vuejs 的核心组成部分，它们共同构成一个有机的整体，不同模块之间互相配合，进一步提升框架性能。