《Vue.js设计与实现》 读书笔记

本文最后更新于：2022年4月22日 上午

第三章 Vue.js 3 的设计思路

声明式描绘UI

  1. 和h5一致的标签
  2. v-bind，v-on 等
  3. h函数的返回值就是虚拟 dom对象，简化虚拟dom的创建 
    const vnode = {
  tag: 'div',
  props: { onclick: () => alert('hello') },
  child: '点击',  // 只有一个子节点
}

初识渲染器

renderer(vnode,container)入口使用

  1. 创建元素
  2. 遍历 props添加属性及事件
  3. 处理children(深度优先)
  4. 挂载到 container节点下

组件的本质

tag为字符串'div'或者 函数/对象，如果是函数则需要进行调用，如果是对象则需要调用对象中的render函数

模板的工作原理 (编译器)

将 <template>中的内容进行编译，然后添加到 <script>标签块对象上的render 函数中

简单的静态分析

在 <template>编写内容的时候，如果某些属性是动态的，则可以进行标记，加快后续更新的查找时间

<template>
  <div id='box' :class='divClass' > 内容 </div>
</template>

那么转换虚拟dom后

const vnode = {
  tag: 'div',
  props: { onclick: () => alert('hello') },
  child: '内容',  // 只有一个子节点
  patchFlg: 1, // 例如 1 表示 class 是动态的
}