Vue高级接口extend，extends，mixin使用与对比

虽然在我们普遍的项目中，这些接口使用的几率极低，都有可以代替他们的方法，但这并不能成为我们不去了解接触甚至使用它们的接口。官方文档

我普遍在在根目录中创建 utils文件夹，创建一个对象供后续方法使用

// profile.js
// 创建对象
const profile = {
    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',  // 在此次案例中这段可有可无
      data: function () {
        return {
          firstName: 'Walter',
          lastName: 'White',
          alias: 'Heisenberg'
        }
      },
      created() {
      // 重点看打印
        console.log('create-1')
    }
}

export default profile

mixin 混入

// home.vue
<template>
  <div class="home">
    home
  </div>
</template>

<script>
import profile from '@/utils/profile'

export default {
  name: 'Home',
  mixins: [profile],
  data() {
    return {
      firstName: 'home',
      lastName: '111'
    }
  },
  created() {
    console.log('mixins create-2')
    console.log(this.firstName)
    console.log(this.lastName)
    console.log(this.alias)
  }
}
</script>

打印结果

相同方法中，混入的优先级高于原组件，并且合并；相同命名下，原组件的优先级较高，可覆盖混入的变量，若原组件没有的变量但混入组件有变量，则打印混入组件的变量，简而言之就是合并，以原组件为主，混入为辅。

extends 组件拓展

<template>
  <div class="home">
    home
  </div>
</template>

<script>
import profile from '@/utils/profile'

export default {
  name: 'Home',
  extends: profile,
  data() {
    return {
      firstName: 'home',
      lastName: '111'
    }
  },
  created() {
    console.log('mixins create-2')
    console.log(this.firstName)
    console.log(this.lastName)
    console.log(this.alias)
  }
}

打印结果

组件拓展extends与混入mixin相似，打印的结果也一样

extend 扩展构造器

顾名思义，该方式与前两者有本质的区别，前两者是以原有的组件上进行拓展，添加功能数据等。而后者是创建一个新的构造器为主，并在新的构造器上进行功能扩展。

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 ——vue官方

在utils/test.js

import Vue from 'vue'
import profile from './profile'
// 创建构造器
const Profile = Vue.extend(profile)

// 调用 生成
export default new Profile({
	// 
    created() {
        console.log('Vue.extend create-1')
    }
})

mian.js中引入

import Test from '@/utils/test'
Test

打印结果

分析一下：
第一个打印：create-1 是在此处

创建构造器的子类时，运行来自profile.js的created打印；
第二个打印： 为该新的子类扩展的打印；
第三个打印： 为home.vue页面。

总结

• Vue.extend是为了创建组件的构造函数，复用整个组件；
• extends，mixin是为了让原有的组件进行功能的拓展。