vue3 isEqual

Vue3是Vue.js的最新版本，与Vue2相比，它具有许多新的特性和改进，其中一个新特性是`isEqual`函数。该函数用于比较两个JavaScript对象是否相等。

在Vue2中，如果要比较两个对象是否相等，我们通常会使用`JSON.stringify()`方法将它们转换为JSON字符串，然后比较这两个字符串是否相等。但是这种方法有时候并不是非常高效。

Vue3中提供了`isEqual`函数来解决这个问题。该函数使用递归方式深度比较两个对象的每个属性，如果它们完全相同，则返回true。否则返回false。

以下是使用Vue3的`isEqual`函数比较两个对象的示例：

import { isEqual } from 'vue';

const obj1 = {
  a: 1,
  b: {
    c: 2
  }
};

const obj2 = {
  a: 1,
  b: {
    c: 2
  }
};

const isEqualObj = isEqual(obj1, obj2); // true

相关问题

vue3 elementplus 暂存

### Vue3 和 Element Plus 组件缓存或状态暂存

为了实现组件的状态保存，在关闭再打开时能恢复之前的数据，可以利用 `keep-alive` 来完成组件级别的缓存功能。对于更复杂的应用场景，则可能涉及到 Vuex 或者 Pinia 状态管理工具来持久化应用层面的状态。

#### 使用 keep-alive 缓存组件实例

当使用 `<keep-alive>` 包裹动态组件时，会缓存不活动的组件实例而不是销毁它们。这使得切换页面后仍保留上次浏览的内容成为可能[^1]。

<template>
  <div id="app">
    <!-- 缓存名为 'my-component' 的组件 -->
    <keep-alive include="my-component">
      <component :is="currentComponent"></component>
    </keep-alive>

    <el-button @click="toggleComponent">Toggle Component</el-button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const currentComponent = ref('my-component');

function toggleComponent() {
  currentComponent.value === 'my-component'
    ? (currentComponent.value = '')
    : (currentComponent.value = 'my-component');
}
</script>

#### 结合 Element Plus Dialog 实现局部状态保持

如果目标是在对话框内维持某些输入字段或其他交互元素的状态，可以在显示隐藏逻辑里加入额外处理：

/** 点击打开弹框 */
const addProd = () => {
  // 如果已经存在未提交的变化则直接展示现有内容
  if (!isEqual(tempProdNumList.value, prodInfoData.value.productList)) {
    tempProdNumList.value = cloneDeep(prodInfoData.value.productList);
  }
  
  dialogVisible.value = true;
};

这里假设有一个布尔变量 `dialogVisible` 控制着模态窗口可见性，并且每当触发 `addProd()` 方法时都会先判断是否有待更新的信息需要同步到临时副本中去[^3]。

另外值得注意的是，当用户确认操作之后应当记得把最新的产品列表赋值回去以便下次继续编辑：

// 确认选择的时候需要将副本数据给正式数据
prodInfoData.value.productList = cloneDeep(tempProdNumList.value);

这样就实现了即使刷新页面也能记住最后一次填写过的表单信息的效果。

Vue3 defineModel 传递数组

Vue3中的`defineModel`是响应式模型（Reactive Model）的一部分，用于创建和管理复杂的绑定状态。当你需要处理数组数据时，可以使用它来监听数组的变化并进行相应操作。

例如，你可以这样做：

import { ref, onBeforeUpdate } from 'vue';

const items = ref([]);

onBeforeUpdate(() => {
  // 检查items是否进行了增删改操作
  if (Array.isArray(items.value) && !_.isEqual(items.oldValue, items.value)) {
    // 在这里处理数组变化，如更新列表、触发其他计算等
    console.log('Items updated:', items.value);
  }
});

// 使用defineModel的数组版本，如设置或获取数组元素
const addItem = (item) => {
  items.value.push(item);
};

const removeItem = (index) => {
  items.value.splice(index, 1);
};

`items.value`是一个响应式的数组，每次修改都会自动触发依赖更新。你可以使用`push`, `pop`, `splice`等方法操作这个数组，并通过`onBeforeUpdate`钩子来监听变动。