当前位置：首页 > VUE

vue实现$.extend

2026-01-12 18:43:39VUE

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

在 Vue 中可以通过多种方式实现类似 jQuery 的 $.extend 功能，用于深度合并对象。以下是几种常见方法：

使用 Object.assign 进行浅合并

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

使用展开运算符进行浅合并

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const merged = { ...obj1, ...obj2 };
// 结果: { a: 1, b: 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: 1, nested: { x: 10 } };
const obj2 = { b: 2, nested: { y: 20 } };
const merged = deepExtend({}, obj1, obj2);
// 结果: { a: 1, b: 2, nested: { x: 10, y: 20 } }

使用 lodash 的 merge 方法

import { merge } from 'lodash';

const obj1 = { a: 1, nested: { x: 10 } };
const obj2 = { b: 2, nested: { y: 20 } };
const merged = merge({}, obj1, obj2);
// 结果: { a: 1, b: 2, nested: { x: 10, y: 20 } }

在 Vue 组件中使用 mixins

Vue 本身提供了 mixins 功能，可以用于合并组件选项：

vue实现$.extend

const mixin = {
  data() {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data() {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created() {
    console.log(this.$data)
    // 结果: { message: 'goodbye', foo: 'abc', bar: 'def' }
  }
})