Vue.extend有什么意义?



二者我都可以正常使用,这个Vue.extend有什么意义吗?或者特殊的用法

和mixins用法差不多?不清楚,帮顶……

如果想深入掌握 extend 知识,不妨做一个 alert 组件来实现类似于原生的全局调用。

加油!

你可以 new

这是官方API中extend的用法:

Vue.extend( options )

  • 参数
    • {Object} options
  • 用法 :使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。 data 选项是特例,需要注意 - 在 Vue.extend() 中它必须是函数
<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')

结果如下:

<p>Walter White aka Heisenberg</p>

就我个人的理解来看,extend提供了一个能够构造组件的函数(也就是构造器)。在一些特定的应用场景(如自己构建一个复杂弹窗)下,我们使用这种函数式的构造组件的方法,会更灵活一些。

可以参考看看element-ui 的loading组件,它会返回个实例,这个实例可以暴露一些方法,用js的方式调用该组件,而不用在像这样书写:
<component></component>