V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
xiaomajia008
V2EX  ›  程序员

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

  •  
  •   xiaomajia008 · 2016-03-14 14:01:00 +08:00 · 17187 次点击
    这是一个创建于 3166 天前的主题,其中的信息可能已经有所发展或是发生改变。
    第一次用 MVVM 的框架。后端知识完全不懂。
    在使用过程中有个问题。。


    我的 components 里是

    var xxx = vue.extend({});

    exports xxx;


    然后我看了看文档。现在有点分不清 new vue 和 vue.extend 的区别,导致一些 api 方法用起来有错误。。
    12 条回复    2019-08-03 22:39:24 +08:00
    Lxxyx
        1
    Lxxyx  
       2016-03-14 14:04:33 +08:00
    new vue 是新建 vue 对象,需要绑定元素的。 vue.extend 是新建 vue 组件,使用依赖于 vue 对象。
    zhuangzhuang1988
        2
    zhuangzhuang1988  
       2016-03-14 14:12:00 +08:00
    额. 看源码 调试调试..
    Wangxf
        3
    Wangxf  
       2016-03-14 14:35:43 +08:00   ❤️ 1
    @Lxxyx vue.extend 应该是临时保存吧, vue.component 才是新建组建吧
    Lxxyx
        4
    Lxxyx  
       2016-03-14 14:39:09 +08:00
    @Wangxf 抱歉,一下子弄混了
    dearmadman
        5
    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
        6
    xiaomajia008  
    OP
       2016-03-14 16:28:16 +08:00
    @dearmadman
    @Lxxyx

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

    vue 里面如果我想获取 input 的 value ,只能通过绑定 v-model 的形式嘛?不建议从组件里的方法获取 dom 的 value 吗?
    dearmadman
        7
    dearmadman  
       2016-03-14 16:52:13 +08:00
    v-model 就是用来做表单控件的双向绑定的, 你当然也可以手动获取 dom
    只不过 viewModel 封装了更好的方式,为什么不用呢
    swenyang
        8
    swenyang  
       2016-03-14 16:58:22 +08:00
    new 相当于面向对象语言里面的创建对象实例, extend 相当于继承类,新类的成员和函数等声明在 extend({})里面
    life4s
        9
    life4s  
       2017-11-01 15:19:39 +08:00
    @Lxxyx @Wangxf 你们不自个看一下吗?@Lxxyx 说的没错,extend 确实是返回一个组件的构造器,component 也是一样的,也会返回组件构造器。
    life4s
        10
    life4s  
       2017-11-01 15:27:16 +08:00
    也是醉了,有人点赞,有人感谢,有人把自己对的改成错的。。。
    xtrueman83
        11
    xtrueman83  
       2019-08-03 22:17:52 +08:00
    vue 作者的命名水平太差了 净乱用 啥 extend use 应该好好看看计算机英语这本书
    xtrueman83
        12
    xtrueman83  
       2019-08-03 22:39:24 +08:00
    extend 方法返回一个 Vue 扩展实例构造器
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5433 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 03:43 · PVG 11:43 · LAX 19:43 · JFK 22:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.