Question

这个很简单，但我没有从文档中得到我需要的答案。我正在学习Vue.js，而且我不太了解Vue.extend适合的位置。我得到了Vue.component，但我不知道Vue.extend Vue.component没有做到。它只是1.0的遗留功能吗？如果没有，它在Vue 2.0中有用吗？

Answer 1

以前的Vuejs.org网站上的指南有一份文件。

从Vuejs版本0.10.6的vuejs / Vuejs.org派生的http://optimizely.github.io/vuejs.org/guide/composition.html复制。

了解Vue.extend()之间的区别非常重要   和Vue.component()。由于Vue本身是一个构造函数，   Vue.extend()是类继承方法。它的任务是   创建一个Vue的子类并返回构造函数。   另一方面，Vue.component()是资产注册   方法类似于Vue.directive()和Vue.filter()。它的任务是   将给定的构造函数与字符串ID相关联，以便Vue.js可以选择   它在模板中。直接传入选项时   Vue.component()，它会调用Vue.extend()。

Vue.js支持两种不同的API范例：基于类，   命令式，Backbone样式API，以及基于标记，声明性的Web   组件样式API。如果您感到困惑，请考虑一下您的情况   使用new Image()或<img>标记创建图像元素。   每个都是有用的，Vue.js试图提供两者   最大的灵活性。

Answer 2

我认为这种困惑是因为延伸和放大组件紧密相连。要在内部创建组件Vue调用：

// register an options object (automatically call Vue.extend)
Vue.component('my-component', { /* ... */ })

因此，您可以使用extend来挂载基础Vue构造函数的子类（组件构造函数）：https://vuejs.org/v2/api/#Vue-extend

然而，你不太可能遇到或需要走这条路。相反，您将使用组件来获取您可以在应用程序中轻松引用的命名子类。

因此，Extend不是真正的“遗留”功能，它是Vue组件的核心，但组件提供的附加糖使它们成为您工作的默认方式。

Answer 3

Vue v2的文档在Vue.extends上比较稀疏，但总之：

您使用Vue.extend创建组件定义（在旧文档中称为“组件构造函数”），并使用Vue.component至register，以便将其用于模板以实际创建组件 instance 。

<div id="example">
  <my-component></my-component>
</div>

// define
var MyComponent = Vue.extend({
  template: '<div>A custom component!</div>'
})
// register
Vue.component('my-component', MyComponent)
// create a root instance
new Vue({
  el: '#example'
})

但是，在Vue API中的任何地方，您都可以传递由Vue.extend创建的“组件构造函数”，而可以传递普通对象，它将调用Vue.extend for you。

因此上一个示例可以写为

// define
var MyComponent = {
  template: '<div>A custom component!</div>'
}
// register
Vue.component('my-component', MyComponent)
// create a root instance
new Vue({
  el: '#example'
})

这似乎表明人们现在更喜欢将组件定义为普通的JS对象（在Vue世界中称为 options对象）。

您可以看到，在Vue v2的当前文档中，您很少看到Vue.extends，而在v1的文档中，它在描述Vue Instance的前几章中进行了明确说明（与{{ 3}}），并在v2一章中进行了很好的解释。明确指出直接传递选项对象只是一个Components。

我的猜测是，为了使其更简单易学，新文档只在各处使用普通对象。为什么在99％的时间不需要理解这些概念时，还要解释诸如“ Vue构造函数”，“组件构造函数”之类的附加概念，以及Vue.extend是什么？您可以使用普通的JS选项对象和sugar定义应用程序的所有组件，而无需使用Vue.extends。必须使用vue构造函数的唯一地方是使用new Vue创建根Vue实例时。这使用基本的Vue构造函数。您不需要知道 Vue构造函数可以扩展以创建具有预定义选项的可重用组件构造函数 ，因为尽管您可以强制性地创建扩展实例，但在大多数情况下，您将注册一个组件构造函数作为自定义元素，并声明式地将它们组成模板。（register）

因此，文档作者认为您无需了解Vue.extends。但是，有什么用例值得使用Vue.extend而不是普通的 options 对象？

是的

打字稿

如果您想使用Typescript（并且不喜欢source组件），那么要进行正确的类型推断，您class-style请使用Vue.extend而不是普通对象。它使用should ThisType<T>为this对象获取正确的推断。

feature

组件继承（再次是Typescript）

不仅可以在基础.extend的构造函数上使用Vue，还可以在自定义组件上使用.extend。这不如灵活，因为您可以在组件中使用许多mixins，并且.extend方法仅适用于一个组件。但是，它与Typescript更好地搭配使用，对于它来说，mixin似乎mixins。在许多情况下，使用never的Typescript支持可能“足够好”。您可以访问继承的组件中的字段，但是如果您的组件名称与“基本”组件发生冲突，那么它就无法正常工作（例如，对于道具名称冲突，我得到的类型为<div id="appBar"> {{fooMessage}} || {{barMessage}} || {{ additionalData}} <button v-on:click="changeAllMessages">Change</button> </div>）。

var FooComponent = Vue.extend({
    data: () => ({
        fooMessage: 'Foo message'
    }),
    methods: {
        changeFooMessage() {
            this.fooMessage = "Foo message changed";
        }
    }
})
var BarComponent = FooComponent.extend({
    data: () => ({
        barMessage: "Bar message",
    }),
    methods: {
        changeAllMessages() {
            this.barMessage = "Bar message changes";
            this.changeFooMessage();
        }
    }
});
new BarComponent({ el: "#appBar", data: { additionalData: "additional data passed" } });

new Vue({...})

在这里，我还展示了您可以使用自定义组件创建 root Vue实例。就像您可以使用BarComponent一样。也许它没什么用，但是它表明FooComponent和Vue只是扩展的基础Vue的构造函数，您可以像使用一样使用它{{1}}。

Answer 4

除了提供的答案外，还有一个实际的用例，如果您使用的是TypeScript，则可以直接调用Vue.extend()。

在大多数情况下，建议在需要时从其他文件中导入组件定义，而不是在Vue.component()中全局注册它们。它可以使大型项目中的事情井井有条，并且更容易跟踪问题。

有了正确的库，TypeScript可以查看您的组件定义并弄清楚初始化时组件的类型，这意味着它可以随后检查您定义的函数以查看它们是否有意义（即是否您引用的this.foo实际上是一个属性，数据字段，计算值或名为foo的方法）。如果您使用Vue.component()，则可以执行此操作，但如果使用其他使组件可用的典型方式（即导出对象文字），则不能这样做。

但是，另一种选择是导出包装在Vue.extend()中的组件定义。这样，TypeScript将能够将其识别为Vue组件并相应地运行其类型检查，但是您不必放弃导出组件的最佳实践模式，而不必在全局范围内进行注册。

Answer 5

了解Vue.extend的一种简单方法是创建一个扩展Vue类的对象。

通常，要创建Vue的新实例，

var vm = new Vue（{/ * ... * /}）

Vue.extend也创建Vue的实例，即

var page = Vue.extend（{/ * ... * /}）;

page与上述vm一样是Vue的一个实例。

要挂载页面，必须将其挂载到div上，即新页（）。$ mount（'＃page-div'）

＃page-div是您页面中div的编号

另外，对于具有面向对象编程知识的程序员来说，

var ext = Vue.extend（{/ ... /}）

然后我们可以将ext解释为

class ext扩展了Vue {

}

请注意，当您创建组件时，即Vue.component（'my-component'，{/ * ... /}），它实际上会执行以下操作：Vue.component（'my-component' ，Vue.extend（{/ ... * /}）），因此Vue.component在后台调用Vue.extend。

如果您仍然感到困惑，可以将Vue.extend视为用于创建组件的实用程序功能

什么是Vue.extend？

5 个答案:

打字稿

组件继承（再次是Typescript）