core 概念

• 运行时（render）： 将 VNode 渲染成真实 dom

import { h, render } from 'vue'

const VNode = h('div', { class: 'test' }, 'hello world')
render(VNode, document.querySelector('#app'))

• 编译时（compiler）：解析 template（类 html 结构字符串） 模板，生成 render 函数，从而挂载真实 dom

import { complier, createApp } from 'vue'

const render = complier(`<div>hello world</div>`)
createApp({
    render,
}).mounte('#app')

Vue: 编译时 + 运行时框架

dom 渲染：初次渲染=》挂载； 更新渲染=》打补丁

1. 纯运行时，缺少编译器，只能使用 js 对象的方式进行配置
2. 纯编译时，无虚拟 dom，速度可能更快，但是缺少了灵活性
3. 两者结合，在速度和性能中取平衡

副作用

当我们对数据进行 getter 、setter 的时候，所产生的系列后果

modelValue = 'new Value'' 进行了 setter 操作，触发了副作用效果，相对应的视图进行更新 element.innerText = modelValue.value' 进行了 getter 操作，触发了副作用效果，相对应的视图进行更新

假设是对对象中的多个值进行修改，那么就产生相应的多个副作用

ts 支持

各种方法都定义了对应的 ts 声明文件，使得 ts 能够识别；并不是 vue 是由 ts 编写所以就支持 ts 了

声明式、命令式编程

• 命令式（关注过程，描述了一个功能实现的详细逻辑与步骤）：详细指明每个步骤；步骤越多，则对应的代码也更多、复杂
• 声明式（关注结果）：<div>{ { msg } }</div> 如 msg 的渲染，并不需要手动获取 element 节点进行赋值，但是其也完成了目的（由其它工具完成具体的工作）

源码阅读

下载 vue 核心代码，执行 pnpm build, 在 packages/vue/examples 中可以查看使用示例，执行 debug 进行对应模块阅读