此文章参考于juejin.cn/post/734348… 其中部分问题的答案有所整理与更改
1、说一下 v-if 与 v-show 的区别
-
渲染方式：v-if是惰性渲染，条件为真时渲染元素，条件为假时移除元素；v-show则是通过修改元素的CSS display属性来控制显示和隐藏，元素始终存在于DOM中。
-
初始渲染开销：v-if在初始渲染时，若条件为假则不渲染，减少开销；v-show则无论条件如何，都会渲染元素。
-
切换开销：v-if在条件切换时，需要重新创建和销毁元素，开销较大；v-show只需切换CSS属性，开销较小。
-
使用场景：v-if适合条件不常改变的场景；v-show适合条件频繁切换的场景。
2、keep-alive的常用属性有哪些及实现原理
keep-alive可以实现组件缓存，当组件切换时不会对当前组件进行卸载。
常用的两个属性include/exclude，允许组件有条件的进行缓存。
max属性：数字。指定可以缓存的最多组件实例数量。当超过这个数量时，会根据LRU（Least Recently Used，最近最少使用）策略移除最久未使用的组件实例。
两个生命周期activated/deactivated，用来得知当前组件是否处于活跃状态。
实现原理：
- 缓存组件实例：
keep-alive内部维护了一个cache对象，用于存储被缓存的组件实例。当一个组件被首次渲染时，keep-alive会将其缓存起来。之后，如果需要再次渲染该组件，就会从缓存中取出并激活，而不是重新创建。 - 生命周期钩子：
keep-alive为缓存的组件实例引入了两个生命周期钩子：activated和deactivated。当组件被激活时，会调用activated钩子；当组件被停用时，会调用deactivated钩子。这允许开发者在组件被缓存和重新激活时执行特定的逻辑。 - LRU缓存策略：当缓存的组件实例数量达到
max设置的上限时，keep-alive会根据LRU缓存策略移除最久未使用的组件实例。这是通过维护一个keys数组来实现的，最近使用的组件的key会被移到数组末尾，而数组的第一个元素则是最久未使用的组件的key - 抽象组件：
keep-alive是一个抽象组件，它自身不会渲染成一个DOM元素，也不会出现在父组件链中。它只是作为一个包裹容器，用于缓存其子组件实例
综上所述，keep-alive通过缓存组件实例、引入生命周期钩子、采用LRU缓存策略以及作为抽象组件的方式，实现了在组件切换时保留组件状态、避免重复渲染DOM、提高性能的目的。在实际开发中，可以根据需要设置include、exclude和max属性来灵活地控制哪些组件被缓存以及如何管理缓存的组件实例。
3、nextTick 的作用是什么？他的实现原理是什么？使用场景？
作用：在下次 DOM 更新循环结束之后执行延迟回调，确保在异步操作完成后立即更新组件状态。
实现原理： nextTick 的实现原理基于 JavaScript 的事件循环机制。具体来说，当调用 nextTick 方法时，Vue 会将传入的回调函数添加到一个队列中。在当前更新周期结束后，Vue 会检查这个队列中的回调函数，并逐个执行它们。这样，回调函数就会在下一个更新周期开始时执行，确保 DOM 已经更新完成。
使用场景： nextTick 常用于以下场景：
1.在组件更新完成后进行 DOM 操作：例如，调整滚动位置或显示模态框1。
2.响应异步操作的完成：例如，在 AJAX 请求返回后更新组件状态1。
3.避免 DOM 状态不一致的问题：在组件状态改变后立即访问 DOM，可能会遇到 DOM 尚未更新的情况，使用 nextTick 可以确保在 DOM 更新后访问 DOM1。
4.在 Vue 生命周期钩子中操作 DOM：在 mounted 钩子中，虽然 DOM 已经挂载，但如果在该钩子中直接操作 DOM 并依赖于 Vue 数据驱动的特性（如 v-for、v-if 等），则可能需要使用 nextTick 来确保 DOM 更新完成后再进行操作4。
5.使用 Vue 第三方库或插件时：有些第三方库或插件可能需要操作 DOM，并且依赖于 Vue 的数据绑定。在这些情况下，使用 nextTick 可以确保在 Vue 完成 DOM 更新后再调用这些库或插件的初始化方法，以避免潜在的错误或不一致4。
4、Vue 组件的 data 为什么必须是函数
一个组件被复用多次的话，也就会创建多个实例。本质上，这些实例用的都是同一个构造函数。如果data是对象的话，对象属于引用类型，会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突，data必须是一个函数。
