当前位置：首页 > VUE

vue实现$.extend

2026-01-07 18:07:54VUE

Vue 实现类似 jQuery 的 `$.extend` 功能

在 Vue 中实现类似 jQuery 的 $.extend 功能，可以通过多种方式完成。$.extend 主要用于合并多个对象的属性，Vue 提供了内置方法或可以通过原生 JavaScript 实现类似功能。

使用 Vue 的 `Vue.util.extend`（不推荐）

Vue 2.x 提供了 Vue.util.extend，但官方文档并未明确推荐使用，因为它属于内部工具方法，可能在不同版本中发生变化。

vue实现$.extend

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

使用 JavaScript 的 `Object.assign`

ES6 提供了 Object.assign，可以实现浅合并对象。

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

使用 Lodash 的 `_.merge`

如果需要深度合并对象，可以使用 Lodash 的 _.merge 方法。

vue实现$.extend

import _ 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 (typeof target !== 'object' || typeof source !== 'object') return target;

  for (const key in source) {
    if (source[key] instanceof Object && !Array.isArray(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);
}

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() {
    const defaultData = { a: 1, b: 2 };
    const customData = { b: 3, c: 4 };
    return Object.assign({}, defaultData, customData); // { a: 1, b: 3, c: 4 }
  }
};