当前位置：首页 > VUE

vue实现$.extend

2026-03-27 11:11:19VUE

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

在 Vue 中实现类似 jQuery 的 $.extend 功能，可以通过以下方法完成。$.extend 主要用于对象合并，Vue 提供了多种方式实现类似效果。

使用 `Object.assign`

Object.assign 是 JavaScript 的原生方法，用于合并对象。它会将所有可枚举属性从一个或多个源对象复制到目标对象，并返回目标对象。

vue实现$.extend

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

使用展开运算符（Spread Operator）

展开运算符 ... 是 ES6 的特性，可以更简洁地合并对象。

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

使用 Vue 的 `Vue.util.extend`

Vue 内部提供了一个工具方法 Vue.util.extend，功能类似于 $.extend，但它是 Vue 内部 API，不建议在生产环境中使用。

vue实现$.extend

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

自定义 `extend` 方法

如果需要深度合并（deep merge），可以自定义一个 extend 方法。

function extend(target, ...sources) {
  sources.forEach(source => {
    for (let key in source) {
      if (source[key] !== null && typeof source[key] === 'object') {
        target[key] = extend(target[key] || {}, source[key]);
      } else {
        target[key] = source[key];
      }
    }
  });
  return target;
}

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

使用第三方库

如果需要更复杂的合并功能，可以使用第三方库如 lodash.merge。

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 } }