Vue组件生命周期与v-if/v-show深度解析

"Vue高频面试题" Vue.js是前端开发中广泛使用的JavaScript框架，其核心特性之一是组件化。面试中，Vue生命周期、条件渲染（v-show和v-if）以及指令优先级等知识点是常见的考察点。 #### 一、Vue生命周期 Vue组件有清晰的生命周期，分为8个主要阶段： 1. `beforeCreate`：组件实例刚刚创建，数据观测（data observer）和事件还未初始化。 2. `created`：组件实例已经创建完成，数据观测和事件已经被初始化，但DOM尚未创建。 3. `beforeMount`：在挂载开始之前被调用，相关的render函数首次被调用。 4. `mounted`：组件实例挂载到真实DOM上，此时可以访问到真实的DOM元素，但子组件可能还没有挂载。 5. `beforeUpdate`：当数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前。 6. `updated`：组件DOM已经更新，可以在此处进行DOM操作，但可能会有副作用，因为可能会触发其他更新。 7. `beforeDestroy`：组件实例销毁之前调用，这时实例仍然可用。 8. `destroyed`：组件实例被销毁，所有绑定的事件监听器被移除，与实例相关的Vue实例属性将被清空或重置。 对于使用`keep-alive`的组件，会有额外的两个生命周期钩子： 1. `activated`：当组件被缓存后再次激活时调用。 2. `deactivated`：当组件被缓存，即将被替换时调用。 #### 二、v-show和v-if 这两个指令用于根据条件控制元素的显示和隐藏。 - `v-show`：通过改变CSS的`display`属性来实现元素的隐藏和显示，无论条件是否满足，元素始终会被渲染在DOM树中，只是简单的切换`display`值。 - `v-if`：基于条件决定是否创建或销毁元素，如果条件为假，元素不会被渲染到DOM中，节省了资源。 两者的区别在于： - 显示/隐藏效率：`v-show`适合频繁切换，因为它只需切换CSS；而`v-if`适合不频繁切换，因为它涉及元素的创建和销毁。 - 初始加载：`v-if`在初始加载时不会生成DOM，而`v-show`会。 - 使用场景：`v-show`常用于简单显示/隐藏需求，如蒙层、购物车等；`v-if`更适合于控制复杂条件下的元素生成，如首页栏目切换。 #### 三、v-if和v-for优先级 在Vue中，`v-for`的优先级高于`v-if`。这意味着如果一个元素同时有`v-if`和`v-for`，`v-for`会先于`v-if`执行。这是因为`v-for`通常用于数据列表渲染，而`v-if`更多是用于条件判断，所以Vue设计时让数据处理优先于逻辑判断。 在源码中，Vue会先处理`v-for`，只有当`v-for`不存在或者处理完成后，才会考虑`v-if`。这种设计使得在处理大量数据时更加高效，避免了不必要的条件判断。 理解这些核心概念对于深入掌握Vue.js并解决实际问题至关重要，它们也是面试中衡量开发者Vue技能的重要标准。