编译 web 模式的编译主要做了 3 件事： 解析 template 生成 AST AST 转换 生成代码 解析 template 生成 AST 解析子节点 解析注释节点 解析插值 解析普通文本 解析

内置组件 <Teleport> 定义 创建、更新 移除 <KeepAlive> 定义 创建 卸载 <Transition> 定义 渲染 钩子函数的执行

> 本质是 **prop** 和 **事件监听** 的语法糖。 > > 通过 prop 实现 `数据 -> 视图` 的单向数据流；通过监听 change 或 input 事件实现 `视图 -> 数据`

directive 定义：本质就是一个 JavaScript 对象，对象上挂着一些钩子函数。 实现：在元素的生命周期中注入代码。 指令注册 注册原理：把指令的定义保存到相应的地方，未来使用的时候可以从

插槽的实现实际上就是一种 **延时渲染**，把父组件中编写的插槽内容保存到一个对象上，并且把具体渲染 DOM 的代码用函数的方式封装，然后在子组件渲染的时候，根据插槽名在对象中找到对应的函数，然后执行

props props 的作用：允许组件的使用者在外部传递，实现各种各样的功能。 初始化 props 初始化 Props 主要做了 3 件事： 设置 props 的值 验证 props 合法 把 pr

# 依赖注入 依赖注入用于祖先组件向后代组件传递数据。 > 特点： > > 祖先组件不需要知道哪些后代组件在使用它提供的数据。 > > 后代组件也不需要知道注入的数据来自哪里。

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机

侦听器 watch 侦听器是当侦听的对象或者函数发生了变化则自动执行某个回调函数。 侦听器的内部设计：侦听响应式数据的变化，内部创建 effect runner，首次执行 runner 做依赖收集，然