1. data为什么最好是一个函数
为了防止多个组件实例对象公用一个
data
，采用函数的形式，在调用
initData
时会生成一个全新的
data
对象
2. Vue的生命周期
| Vue2 | Vue3(options) | Vue3(composition) |
|---|---|---|
| 创建前(beforeCreate) | beforeCreate | setup |
| 创建完成(created) | created | setup |
| 挂载前(beforeMount) | beforeMount | onBeforeMount |
| 挂载完成(Mounted) | Mounted | onMounted |
| 更新前(beforeUpdate) | beforeUpdate | onBeforeUpdate |
| 更新(Updated) | Updated | onUpdated |
| 销毁前(beforeDestroy) | beforeUnmount | onBeforeUnmount |
| 销毁前(destroyed) | unmounted | onUnmounted |
| —————————- | errorCaptured(在捕获了后代组件传递的错误时调用) | onErrorCaptured |
当组件是
KeepAlive
缓存树上的组件时还存在
onActivated
onDeactivated
(composition)；
activated
deactivated
(options)两种分别表示激活或失活状态的生命周期另外当前如果属于
SSR
：
onServerPrefetch
;
serverPrefetch
调用时期在
组件实例在服务器上被渲染之前要完成的异步函数
不要在
updated
钩子函数中更改组件的状态，这可能导致死循环更新
父子组件之间的生命周期关系
- 渲染阶段：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
- 更新阶段：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
- 销毁阶段：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
v-for中 key的作用
为了更加高效的更新虚拟DOM，diff算法中比较到了
key
，如果不设置key或者元素key值重复，就会认为这是两个相同过的节点，之后重复进行更新操作，造成性能浪费
v-show 和 v-if 的区别
前者通过
display:none
来控制元素的展示或隐藏，后者直接销毁元素
v-if 和 v-for 一起使用可能产生的问题
Vue 2 中，
v-for
的优先级比
v-if
高，这意味着
v-if
将分别重复运行于每一个
v-for
循环中。如果要遍历的数组很大，而真正要展示的数据很少时，将造成很大的性能浪费。
Vue 3 中，则完全相反，
v-if
的优先级高于
v-for
，所以
v-if
执行时，它调用的变量还不存在，会导致异常。
keep-alive 是什么
他是为了实现组件缓存，保持组件的状态，避免反复渲染导致的性能问题
子组件是否可以直接改变父组件的数据
不建议这样做，因为props应该遵循单向绑定原则，如果子组件需要改变父组件的数据，可以通过 自定义事件等方式完成