了解API之下的理论基础，称之为“Vue知识”

Vue知识

一、MVVM和MVC比较

M - Model 数据
V - View 视图
VM - ViewModel
C - Controller 业务逻辑

1.MVC模式

• Controller层很薄，只起到路由作用；View层很厚，业务逻辑都在View

2.MVVM模式

• View和Model不直接发生联系，通过VM传递
• 通信都是双向的
• 采用双向绑定，View的变动自动反映到VM（事件监听），VM的变动自动反应到View（响应式）

Vue框架采用的就是MVVM模式，用”数据驱动视图“，避免了直接操作DOM

二、生命周期

1.什么是”生命周期“

一个Vue组件会经历从创建到销毁的完整流程，这个流程称之为生命周期。在这个流程中，所做的事情包括：初始化实例、模板编译、挂载实例、更新实例、销毁实例。在每个阶段当中会运行「生命周期钩子函数」，用来让开发者在指定阶段插入自己的代码逻辑。

2.有哪些阶段

一共有8个阶段，分别是：

• 创建前后
• 挂载前后
• 更新前后
• 销毁前后

Vue2和Vue3的生命周期钩子函数命名有一些不同，如下：

Vue2钩子	Vue3钩子	说明
	setup	Vue3独有，在组件中使用组合式API的入口
beforeCreate	（同左）	创建前
created	（同左）	创建完成
beforeMount	（同左）	挂载前
mounted	（同左）	挂载完毕
beforeUpdate	（同左）	组件数据发生变动，更新前
updated	（同左）	组件数据变动且更新完成
beforeDestory	beforeUnmounted	实例销毁前
destoryed	unmounted	销毁完成
activated	（同左）	keep-alive缓存的组件激活时
deactivated	（同左）	keep-alive缓存的组件停用时

3.常用实践

• created：此时组件初始化完毕，可以访问到各种数据
• mounted：DOM创建完成，可以获取到DOM元素的引用
• beforeUnmounted：销毁之前，用于定时器、订阅的销毁等

5.父子组件的生命周期顺序

• 加载过程：父创建 -> 父开始挂载 -> 子创建 -> 子挂载 -> 父挂载完成
• 更新过程：父开始更新 -> 子更新 -> 父完成更新
• 销毁过程：父开始销毁 -> 子销毁 -> 父完成销毁

其实很好理解，父组件要完成一个周期，必须要启动并等待子组件完成所有周期，然后父组件才能完成它的周期

• 虚拟DOM
• diff算法
• 响应式原理
• 组件 vs 插件

参考链接

MVC，MVP 和 MVVM 的图示 - 阮一峰的网络日志 (ruanyifeng.com)