vue3 中怎么使用Vue.extend

在Vue 3中，`Vue.extend` 方法已经被移除，不再是官方推荐的使用方式。Vue 3中，通过使用 `createApp` 函数来创建Vue实例。

如果你想扩展一个组件，在Vue 3中可以使用 `defineComponent` 函数来定义一个组件。

下面是一个示例：

import { defineComponent } from 'vue';

// 创建一个扩展的组件
const ExtendedComponent = defineComponent({
  name: 'ExtendedComponent',
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  },
  template: `
    <div>
      <p>{{ message }}</p>
      <button @click="greet">Greet</button>
    </div>
  `
});

// 在应用中使用扩展的组件
const app = createApp({
  components: {
    ExtendedComponent
  },
  template: `
    <div>
      <h1>My App</h1>
      <extended-component></extended-component>
    </div>
  `
});

app.mount('#app');

在上述示例中，我们首先使用 `defineComponent` 函数定义了一个扩展的组件 `ExtendedComponent`，其中包括了数据、方法和模板。

然后，在创建应用 `createApp` 的时候，将定义好的 `ExtendedComponent` 注册为全局组件，并在应用模板中使用该组件。

最后，调用 `app.mount('#app')` 将应用挂载到指定的 DOM 元素上。

需要注意的是，在Vue 3中，模板中的组件名称不再需要使用短横线分隔，而是直接使用驼峰命名法。

总结来说，Vue 3中推荐使用 `defineComponent` 函数来定义组件，而不再需要使用 `Vue.extend`。