vue实现$.extend

实现类似 $.extend 的功能

在 Vue 中实现类似 jQuery 的 $.extend 功能，可以通过 JavaScript 的原生方法或第三方工具库完成。$.extend 主要用于对象的浅拷贝或深拷贝合并。

使用 Object.assign 实现浅拷贝

Object.assign 是 JavaScript 的原生方法，可以实现对象的浅拷贝合并。

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = Object.assign({}, obj1, obj2);
console.log(merged); // { a: 1, b: 3, c: 4 }

使用 lodash.merge 实现深拷贝

如果需要深拷贝合并对象，可以使用 lodash.merge。

安装 lodash：

npm install lodash

使用示例：

import { merge } from 'lodash';

const obj1 = { a: { b: 1 } };
const obj2 = { a: { c: 2 } };
const merged = merge({}, obj1, obj2);
console.log(merged); // { a: { b: 1, c: 2 } }

自定义深拷贝合并函数

如果不依赖第三方库，可以手动实现一个深拷贝合并函数。

function deepExtend(target, ...sources) {
  if (!sources.length) return target;
  const source = sources.shift();

  if (isObject(target) && isObject(source)) {
    for (const key in source) {
      if (isObject(source[key])) {
        if (!target[key]) Object.assign(target, { [key]: {} });
        deepExtend(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }

  return deepExtend(target, ...sources);
}

function isObject(item) {
  return item && typeof item === 'object' && !Array.isArray(item);
}

// 使用示例
const obj1 = { a: { b: 1 } };
const obj2 = { a: { c: 2 } };
const merged = deepExtend({}, obj1, obj2);
console.log(merged); // { a: { b: 1, c: 2 } }

在 Vue 组件中使用

在 Vue 组件中，可以将上述方法用于合并 data、props 或其它对象。

export default {
  data() {
    return {
      obj1: { a: 1, b: 2 },
      obj2: { b: 3, c: 4 }
    };
  },
  created() {
    this.mergedData = Object.assign({}, this.obj1, this.obj2);
    console.log(this.mergedData); // { a: 1, b: 3, c: 4 }
  }
};

总结

• 浅拷贝合并使用 Object.assign。
• 深拷贝合并推荐使用 lodash.merge。
• 手动实现深拷贝合并函数适用于不依赖第三方库的场景。