Vue - 基础知识

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应该遵循单向绑定原则，如果子组件需要改变父组件的数据，可以通过 自定义事件等方式完成