《Vue.js设计与实现》笔记第14章：内建组件和模块

Vue.js设计与实现第14章：内建组件和模块

本章导读

前面已经实现：

普通组件

异步组件

函数式组件

但 Vue 还有一些特殊组件：

<KeepAlive>
<Teleport>
<Transition>

它们：

不是业务组件

而是框架内置组件

特点：

不负责渲染内容

负责控制渲染行为

本章核心：

KeepAlive

Teleport

Transition

一、什么是内建组件

普通组件

<UserInfo />

作用：

渲染UI

内建组件

<KeepAlive>
<Teleport>
<Transition>

作用：

控制VNode

本质：

增强渲染器能力

二、KeepAlive

问题

组件切换：

<A v-if="show" />
<B v-else />

切换：

A卸载

↓

B挂载

再次切换：

B卸载

↓

A重新创建

问题：

状态丢失

三、KeepAlive作用

缓存组件实例。

示例：

<KeepAlive>
  <UserPage />
</KeepAlive>

效果：

组件不会真正卸载

状态保留：

data

ref

DOM

四、KeepAlive工作原理

正常组件：

unmount

KeepAlive：

缓存

流程：

组件切换

↓

缓存VNode

↓

DOM移动到隐藏容器

↓

再次显示

↓

恢复

五、缓存容器

KeepAlive内部维护：

cache = new Map()

结构：

Map<
 key,
 vnode
>

例如：

cache.set(
 'UserPage',
 vnode
)

六、组件激活与失活

普通组件：

mount

unmount

KeepAlive组件：

activate

deactivate

不会销毁。

七、KeepAlive生命周期

新增：

activated

deactivated

执行顺序：

mounted

↓

activated

↓

deactivated

↓

activated

八、include和exclude

include

<KeepAlive
 include="UserPage"
/>

只缓存：

UserPage

exclude

<KeepAlive
 exclude="LoginPage"
/>

不缓存：

LoginPage

九、max属性

限制缓存数量

<KeepAlive
 max="10"
/>

超过：

LRU淘汰

删除最久未使用组件。

十、LRU算法

Least Recently Used

十一、Teleport

问题

组件嵌套：

<App>

  <Dialog />

</App>

Dialog渲染：

<div id="app">
  <dialog/>
</div>

问题：

受父级CSS影响

十二、Teleport作用

把内容：

渲染到指定容器

例如：

<Teleport to="body">

 <Dialog/>

</Teleport>

结果：

<body>

  <dialog/>

</body>

十三、Teleport本质

逻辑位置：

仍属于当前组件

物理位置：

移动到body

十四、Teleport实现原理

普通组件：

patch(
 vnode,
 container
)

Teleport：

patch(
 vnode,
 targetContainer
)

关键：

更换挂载容器

十五、Teleport更新

to变化

例如：

<Teleport
 :to="target"
/>

变化：

body

↓

#modal

执行：

移动DOM

无需重建。

十六、Transition

问题

组件切换：

<div v-if="show"/>

显示：

立即出现

隐藏：

立即消失

缺少动画。

十七、Transition作用

提供：

进入动画

离开动画

例如：

<Transition>
  <div/>
</Transition>

十八、Transition流程

进入：

beforeEnter

↓

enter

↓

afterEnter

离开：

beforeLeave

↓

leave

↓

afterLeave

十九、CSS动画实现

Vue自动添加：

进入：

.enter-from

.enter-active

.enter-to

离开：

.leave-from

.leave-active

.leave-to

二十、Transition执行过程

进入：

添加enter-from

↓

强制重绘

↓

切换enter-to

↓

动画结束

离开：

leave-from

↓

leave-to

↓

移除DOM

二十一、Transition与Renderer协作

普通卸载：

unmount(vnode)

Transition：

等待动画完成

然后：

unmount()

二十二、Transition本质

不改变VNode。

只是：

拦截挂载

拦截卸载

添加动画逻辑。

二十三、三大内建组件对比

组件	作用
KeepAlive	缓存组件
Teleport	改变渲染位置
Transition	添加动画

二十四、组件与渲染器关系

VNode

↓

Renderer

↓

KeepAlive

↓

Teleport

↓

Transition

↓

DOM

这些能力：

都建立在Renderer基础上

第14章核心知识图谱

Built-in Components

│

├── KeepAlive

│      ├── cache
│      ├── activate
│      ├── deactivate
│      └── LRU

│

├── Teleport

│      ├── to
│      ├── target
│      └── move

│

└── Transition

       ├── enter
       ├── leave
       ├── CSS Class
       └── Animation

高频面试题

KeepAlive作用？

缓存组件实例

KeepAlive为什么能保留状态？

因为：

不执行unmount

只是：

移动DOM

activated和mounted区别？

mounted：

首次挂载

activated：

从缓存恢复

KeepAlive如何限制缓存数量？

max

+

LRU

Teleport作用？

改变DOM挂载位置

Teleport会改变组件关系吗？

不会

逻辑树不变。

Transition作用？

进入动画

离开动画

Transition什么时候真正删除DOM？

动画结束后

Vue三大内建组件是什么？

KeepAlive

Teleport

Transition

本章总结