请教个前端同学关于 new vue 和 vue.extend 的区别。。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3187 天前的主题，其中的信息可能已经有所发展或是发生改变。

第一次用 MVVM 的框架。后端知识完全不懂。
在使用过程中有个问题。。

我的 components 里是

var xxx = vue.extend({});

exports xxx;

然后我看了看文档。现在有点分不清 new vue 和 vue.extend 的区别，导致一些 api 方法用起来有错误。。

12 条回复 • 2019-08-03 22:39:24 +08:00

Lxxyx

2016-03-14 14:04:33 +08:00

new vue 是新建 vue 对象，需要绑定元素的。 vue.extend 是新建 vue 组件，使用依赖于 vue 对象。

zhuangzhuang1988

2016-03-14 14:12:00 +08:00

额. 看源码调试调试..

Wangxf

2016-03-14 14:35:43 +08:00

@Lxxyx vue.extend 应该是临时保存吧， vue.component 才是新建组建吧

Lxxyx

2016-03-14 14:39:09 +08:00

@Wangxf 抱歉，一下子弄混了

dearmadman

2016-03-14 15:08:30 +08:00

```javascript

var myOptions = {
el: '#example',
data: {
message: 'Hello'
}
}

var theOptionsInstance = Vue.extend(myOption)

var instance = new theOptionsInstance()

-------------------------------------------------------

var plain = new Vue()

// options

var optionsInstance = new Vue(myOptions)

从而可以看出 extend 是 vue 用预定义选项来创建可复用组件的构造器

```

xiaomajia008

2016-03-14 16:28:16 +08:00

@dearmadman
@Lxxyx

感谢两位回答，我还有个问题。

vue 里面如果我想获取 input 的 value ，只能通过绑定 v-model 的形式嘛？不建议从组件里的方法获取 dom 的 value 吗？

dearmadman

2016-03-14 16:52:13 +08:00

v-model 就是用来做表单控件的双向绑定的，你当然也可以手动获取 dom
只不过 viewModel 封装了更好的方式，为什么不用呢

swenyang

2016-03-14 16:58:22 +08:00

new 相当于面向对象语言里面的创建对象实例， extend 相当于继承类，新类的成员和函数等声明在 extend({})里面

life4s

2017-11-01 15:19:39 +08:00

@Lxxyx @Wangxf 你们不自个看一下吗？@Lxxyx 说的没错，extend 确实是返回一个组件的构造器，component 也是一样的，也会返回组件构造器。

life4s

2017-11-01 15:27:16 +08:00

也是醉了，有人点赞，有人感谢，有人把自己对的改成错的。。。

xtrueman83

2019-08-03 22:17:52 +08:00

vue 作者的命名水平太差了净乱用啥 extend use 应该好好看看计算机英语这本书

xtrueman83

2019-08-03 22:39:24 +08:00

extend 方法返回一个 Vue 扩展实例构造器