【前端面试3+1】05v-if和v-show的区别、v-if和v-for能同时使用吗、Vuex是什么？【合并两个有序链表】

本文链接：https://blog.csdn.net/qq_61798306/article/details/137152195

本文讨论了Vue.js中v-if和v-show的区别，包括它们在元素渲染性能上的优劣，以及在Vue3中的使用限制。此外，还介绍了Vuex的状态管理库，包括其核心概念和应用场景。最后，涉及了一个算法问题：合并两个有序链表。

摘要由CSDN通过智能技术生成

一、v-if和v-show的区别

v-if 和 v-show 是 Vue.js 中用来控制元素显示与隐藏的指令。

1.v-if：

v-if 是根据表达式的真假值来决定是否渲染元素。
当表达式为真时，元素会被渲染到 DOM 中；当表达式为假时，元素不会被渲染到 DOM 中。
每次条件改变时，v-if 中的元素会被销毁和重新创建，因此在切换时性能开销较大。
<div v-if="isVisible">显示内容</div>
2.v-show:

v-show 是根据表达式的真假值来控制元素的显示与隐藏。
当表达式为真时，元素会显示在页面上；当表达式为假时，元素会隐藏，但仍然保留在 DOM 中。
每次条件改变时，v-show 只是简单地切换元素的 display 样式，因此在切换时性能开销较小。
<div v-show="isVisible">显示内容</div>
总结：

如果需要频繁切换元素的显示与隐藏，并且元素的渲染开销比较大，建议使用 v-show。
如果元素的显示与隐藏不频繁，或者元素的渲染开销较小，可以使用 v-if。

二、v-if和v-for能同时使用吗？

1.是否能同时使用：

在 Vue 2.x 中，v-if 和 v-for 可以同时使用而不会报错，但是在 Vue 3 中，如果在同一个元素上同时使用 v-if 和 v-for，会出现报错。这是因为 Vue 3 引入了更严格的编译器，不允许在同一个元素上同时使用 v-if 和 v-for。

2.vue3中如何解决：

在 Vue 3 中，如果需要在同一个元素上同时使用 v-if 和 v-for，可以通过将 v-if 移动到包裹元素上的方式来解决这个问题。例如：
<div v-for="item in items" :key="item.id">
  <div v-if="item.visible">
    {{ item.text }}
  </div>
</div>
在上面的示例中，v-if 被移动到内部的 div 元素上，这样就避免了在同一个元素上同时使用 v-if 和 v-for 而引起的报错。

3.总结：

在 Vue 2.x 中，v-if 和 v-for 可以同时使用而不会报错。
在 Vue 3 中，不允许在同一个元素上同时使用 v-if 和 v-for，需要将 v-if 移动到包裹元素上来解决。

三、Vuex是什么？

1.定义：

Vuex 是 Vue.js 官方推荐的状态管理库，用于管理 Vue.js 应用中的状态（state）。Vuex 遵循 Flux 架构，将应用的状态集中管理在一个全局的 Store 对象中，通过一些规则来保证状态的一致性和可维护性。

2.Vuex的核心概念：

在 Vue.js 应用中，Vuex 主要由以下几个核心概念组成：

State（状态）：即应用的数据源，存储在 Vuex 中的数据状态。

Getters（获取器）：用于从 Store 中获取数据，并进行一些计算或处理后返回新的数据。

Mutations（突变）：用于修改 Store 中的状态，必须是同步函数。

Actions（动作）：用于提交 Mutations，可以包含异步操作。

Modules（模块）：用于将 Store 分割成模块，每个模块拥有自己的 State、Getters、Mutations 和 Actions。

3.vuex的部分应用场景：

大型应用：当应用变得复杂，组件之间的通信和状态管理变得困难时，使用 Vuex 可以更好地管理应用的状态，提高代码的可维护性和可扩展性。

多个组件共享状态：当多个组件需要共享某些状态时，可以将这些状态放在 Vuex 中进行统一管理，避免状态在组件之间传递时出现混乱。

异步操作：当需要进行异步操作（如发起网络请求）来修改状态时，可以使用 Actions 来处理异步逻辑，保持状态的一致性。

路由状态管理：当需要在应用中管理路由状态（例如当前路由信息、路由参数等）时，可以使用 Vuex 来管理路由状态，方便在不同组件中共享和操作路由状态。

简短总结：

Vuex 主要用于管理应用中的状态，特别适合在大型应用或需要多个组件共享状态的情况下使用。通过统一管理状态，可以提高应用的可维护性、可扩展性和开发效率。

四、【算法】合并两个有序链表

1.题目：

将两个升序链表合并为一个新的升序链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。

/**
 * Definition for singly-linked list.
 * struct ListNode {
 *     int val;
 *     struct ListNode *next;
 * };
 */
struct ListNode* mergeTwoLists(struct ListNode* list1, struct ListNode* list2) {
    
}

2.解题：

首先判断两个链表是否为空，然后利用循环遍历两个链表，根据节点值的大小依次连接节点，最后返回合并后的链表头节点。

/**
 * Definition for singly-linked list.
 * struct ListNode {
 *     int val;
 *     struct ListNode *next;
 * };
 */
struct ListNode* mergeTwoLists(struct ListNode* list1, struct ListNode* list2) {
    if (list1 == NULL) {
        return list2;
    }
    if (list2 == NULL) {
        return list1;
    }
    
    struct ListNode* head = (struct ListNode*)malloc(sizeof(struct ListNode));
    struct ListNode* cur = head;
    
    while (list1 && list2) {
        if (list1->val < list2->val) {
            cur->next = list1;
            list1 = list1->next;
        } else {
            cur->next = list2;
            list2 = list2->next;
        }
        cur = cur->next;
    }
    
    cur->next = list1 ? list1 : list2;
    
    return head->next;
}