感谢b站up主前端杨村长的精彩分享！
vue组件间通信方式
vue作为组件化开发框架，此题考查vue基本功，对于vue基础api运用熟练度
组件通信常用方式有8种
- props
- $emit
- $parent
- $attrs
- ref
- $root
- eventbus
- vuex
根据组件间关系
父子组件：
props/$emit/$parent/ref/$attrs
兄弟组件：
$parent/$root/eventbus/vuex
跨层级组件：
eventbus/vuex/provide+inject
v-if与v-for优先级
官方不建议同时使用。
vue 2中，在一个元素上同时使用时，v-for会优先使用；
vue 3中，v-if总是优先于v-for生效。
有两种情况下导致我们这样做：
- 为了过滤列表中的项目，比如
v-for=“user in users” v-if="user.inActive"
此时定义一个计算属性activeUsers，让其返回过滤后的列表即可
users.filter(u=>u.isActive)
- 为了避免渲染本应该被渲染的列表，比如
v-for=“user in users” v-if="shouldShowUsers"
此时把v-if移动至容器元素上（ul、ol）或者外面包一层template即可。
vue 生命周期
定义
每个Vue组件实例被创建后都会经过一系列初始化步骤，比如，需要数据观测，模板编译，挂载实例到dom上，以及数据变化时更新dom，这个过程中会运行一些特殊的函数，这些函数称为生命周期钩子，以便用户在特定阶段有机会添加自己的代码。
列举各阶段
生命周期总共分8个阶段，创建前后，载入前后，更新前后，销毁前后，以及一些特殊场景的生命周期。vue3新增了三个用于调试和服务端渲染场景。
| 生命周期vue2 | 生命周期vue3 | 描述 |
|---|---|---|
| beforeCreate | 不需要（直接写到setup函数中） | 组件实例被创建之初 |
| created | 不需要（直接写到setup函数中） | 组件实例已经完全创建 |
| beforeMount | beforeMount | 组件挂载之前 |
| mounted | onMounted | 组件挂载到实例上去之后 |
| beforeUpdate | beforeUpdate | 组件数据发生变化，更新之前 |
| updated | onUpdated | 数据更新之后 |
| beforeDestroy | beforeUnmount | 组件实例销毁之前 |
| destroyed | onUnmounted | 组件实例销毁之后 |
| activated | activated | keep-alive缓存的组件激活时 |
| deactivated | deactivated | keep-alive缓存的组件停用时调用 |
| errorCaptured | errorCaptured | 捕获一个来自子孙组件的错误时被调用 |
| -- | renderTracked | 调试钩子，响应式依赖被收集时调用 |
| -- | renderTriggered | 调试钩子，响应式依赖被触发时调用 |
| -- | serverPrefetch | ssr only，组件实例在服务器上被渲染前调用 |
整体流程
实践
vue中 key 值的作用
用于优化patch性能
key的作用主要是为了更高效的更新虚拟DOM。
patch是整个虚拟DOM中最核心的方法，主要功能是对新旧vnode进行diff的过程，经过patch比对，最后生成新的真实DOM节点，更新改变部分的视图。
为何要用Key?
vue在patch过程中判断两个节点是否为相同节点，key是一个必要条件。渲染一组列表时，key是唯一标识，如果不定义key的话，vue只能认为比较的两个节点是同一个，哪怕实际上不是，这导致频繁更新元素，使得整个patch过程比较低效，影响性能。
实际使用方式
- 渲染一组列表时key必须设置，而且必须是唯一标识，应避免使用数组索引作为key
- vue中使用相同标签元素过渡切换时，也会使用key属性，目的是为了让vue可以区分他们，否则vue只会替换其内部属性而不会触发过渡效果。
vue 3新特性
api层面相关
- 组合式API
- SFC （组合式API语法糖）
- Teleport传送门
- Fragments
- Emits选项
- 自定义渲染器
- SFC CSS变量
- Suspense
框架层面改进
- 更快 虚拟DOM重写、编译器优化、基于Proxy的响应式系统
- 更小
- 更易维护 TS+模块化
- 更容易扩展
