导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

业务技能

针对性攻坚

AI

rollup.js

一般开发js框架、js库不会用到 webpack 打包

• webpack：项目级打包方案
  • 大量处理例如 css、scss、js、jsx、.vue
• rollup：工厂打包工具（专注打包JS）
  • 主要打包JS（开发库、开发框架，基本都只有js）
  • vue2.0、vue3.0、react 都是用 rollup 打包

package.json

rollup.config.js

Vue模板编译优先级顺序

1. render
2. template
3. el

let vm = new Vue({
	el: '#app', // 3
  render(createElement) {
    return createElement('h1')
  }, // 1
  template: `` // 2
});

先看 options API 中是否有 render，没有再看 template，什么都没有就看 html 文件中的 el 了

模板编译过程

template -> 【模板编译】 -> 形成真实 DOM

1. 获取 template
2. template 转 AST 抽象语法树
3. AST 转为 render 函数
4. render 函数 转换 虚拟节点
5. 设置 PATCH → 打补丁到真实 DOM（diff算法）

AST（Abstract Syntax Tree）抽象语法树

源代码的抽象语法的树状描述

目的：

把代码形成树状结构，然后对这个结构做分析、优化、处理，最终再把它转化为所需内容

应用：

• webpack 利用 AST：import 转 require()
• ts 利用AST：ts 转 js
• eslint 代码规范解析

说白了就是字符串解析、拼接、再解析、再拼接...

template 转 AST

对源代码的数据结构化

⚪️ 目的

模板中有 v-show 、v-if 、v-model 这些指令等其他内容，而这些内容是不能存在于 虚拟DOM 的，因为真实html不需要它们，它们是框架所需的，类似这种东西全部都得转为 AST 后做处理，把这些多余的（相对真实html）属性都解析成对应功能并最终删除它们。例如

• vue的各种指令 => 处理
• 用户少写了结束标签 </div> => 添加上 or 给警告

⚪️ 示例

• 解析过程
  • 看见 <div 认为是个标签，删除
  • 看见 id="app" 认为是 div 的一个属性，添加进 attrs ，又删除
  • ...
  • 解析一段字符串，就删除它，直到解析完

<div id="app" style="color: red;font-size: 20px;">
  hello
  <h1>{{ name }}</h1>
  <ul>
    <li style="color: green">{{ age }}</li>
    <li>{{ info.job }}</li>
  </ul>
</div>

转为 👇🏻

{
	tag: "div",
  type: 1, // 1代表标签
  attrs: [
    {
    	name: 'id',
      value 'app'
    },
    {
    	name: 'style',
      value: {
      	'color': 'red',
        'font-size': '20px'
      }
    }
  ],
  children: [
    {
    	type: 3, // 3代表文本
      text: 'hello'
    },
    {
    	type: 1,
      tag: 'h1',
      attr: null,
      children: [
        {
        	type: 3,
          text: '{{name}}'
        }
      ]
    }
  ]
}

这不是虚拟DOM，虚拟DOM是描述DOM对象（节点）的，最终是要变成真实DOM

• ast树

render 函数

Vue文档：渲染函数 & JSX

Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

• _c() => createElement() 创建元素
• _v() => createTextNode() 创建文本
• _s() => {{name}} => _s(name) 解析动态数据，返回字符串

• code字符串：

• new Function() 运行code

虚拟 DOM 的意义

通过对比 抽象出来的 JS 对象，来减少不必要的页面渲染与改动

流程梳理

1. 获取 template 模板
2. template 转 ast 树（{{ name }} 在转完之后还不会替换成真正的数据）
3. ast 树转 render 函数
4. render 函数执行（_c、_v、_s）生成 虚拟节点
5. 根据虚拟节点 打 patch 补丁

render 渲染函数

// Vue2
new Vue({
	// render: h => h(App), // 简写
	render(h) {
		return h(App)
	}
}).$mount('#app');

// Vue3
import { createApp, h } from 'vue';
import App from './App.vue';
const app = createApp({
	render() {
		return h(App);
	}
});

h 函数

函数名: createElement

返回值: VNode 虚拟节点

• 多个虚拟 DOM