Vue2中extend 的作用

Vue extend 的作用

Vue extend 是一个全局的api,基于vue 的构造函数去生成一个用于基于 Vue 构造函数创建一个"子类"（组件构造器），而这个子类也是一个 可以创建实例构造函数，所以在使用时也需要进行实例化操作

const MyComponent = Vue.extend({
  // 组件选项
  template: '<div>A custom component!</div>'
})

// 创建并挂载实例
new MyComponent().$mount('#app')

主要特点

1. ‌创建可复用的组件构造器‌：

   • 返回的不是组件实例，而是一个可以创建实例的构造函数
   • 类似于 ES6 中的类继承机制

2. ‌继承基础选项‌：

   • 会继承传入选项对象中的所有 Vue 选项
   • 可以添加新的选项或覆盖父类选项

3. ‌与组件注册的关系‌：

   • Vue.component() 内部使用了 Vue.extend
   • 直接注册组件对象时，Vue 会自动调用 Vue.extend

使用场景

1. 编程式创建组件

const Alert = Vue.extend({
        template:`<div>Alert-Componend</div>`
})
new Alert().$mount(document.CreateElement('div'))

2. 扩展已有组件

// 基础按钮组件
const BaseButton = Vue.extend({ 
        template: `<button class="base-btn" @click="onClick">{{ text }}</button>`, 
        props: ['text'], 
        methods: {
            onClick() { 
                this.$emit('click'); 
            }
        } 
    }); 
    // 扩展出危险按钮（覆盖样式和文本） 
    const DangerButton = BaseButton.extend({ 
        template: `<button class="base-btn danger-btn" @click="onClick">{{ text }}</button>`,   
        props: { text: { default: '危险操作' } } 
    }); 
    // 全局注册扩展后的组件 
    Vue.component('danger-button', DangerButton);

3. 高阶函数

function withLogger(WrappedComponent) {
  return Vue.extend({
    extends: WrappedComponent,
    mounted() {
      console.log('Component mounted')
    }
  })
}

4.与 Vue 实例结合的复杂场景

// 基础按钮组件
const BaseButton = Vue.extend({
  template: `<button class="base-btn" @click="onClick">{{ text }}</button>`,
  props: ['text'],
  methods: {
    onClick() {
      this.$emit('click');
    }
  }
});

// 扩展出危险按钮（覆盖样式和文本）
const DangerButton = BaseButton.extend({
  template: `<button class="base-btn danger-btn" @click="onClick">{{ text }}</button>`,
  props: {
    text: {
      default: '危险操作'
    }
  }
});

// 全局注册扩展后的组件
Vue.component('danger-button', DangerButton);

注意事项

• vue3 已经移除了，defineComponent +steup 取代
• 返回的是组件实例的构造函数，需要通过 new 关键字实例化，在通过 $mount 挂载