全局API

Vue.extend( options )：

extend创建的是一个组件构造器，而不是一个具体的组件实例

//选项对象 baseOptions
let baseOptions= {
    template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
    data: function () {
        return {
            firstName: 'Walter',
            lastName: 'White',
            alias: 'Heisenberg'
        }
    },
    created(){
        console.log('onCreated-1');
    }
};

使用：

1、extend常服务于Vue.component用来生成组件，这是注册全局组件，可以在任意实例的components里使用。

使用示例：全局提示组件，全局的网页底部，动态创建全局组件（插件 ），用Vue.extend构建消息提示组件。（网页底部组件：创建的组件的dom结构，直接在body底部插入，在vue的app实例范围外，创建之后，该组件仍然可以响应组件内的数据。）

Vue.component('global-component', Vue.extend(baseOptions));
//传入一个选项对象（自动调用 Vue.extend）,等价于上行代码.
Vue.component('global-component', baseOptions);

2、Vue.extend只是创建一个构造器,他是为了创建可复用的组件，在其它地方可以直接new。而mixins,extends是为了扩展组件属性，采用的方式是混合选项对象baseOptions

let BaseComponent = Vue.extend(baseOptions);
//基于基础组件BaseComponent,再扩展新逻辑.
new BaseComponent({
    created(){
        //do something
        console.log('onCreated-2');
    }
    //其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2

它的混入规则，和mixins一样。详细查阅vue实例属性总结：根实例和组件实例

new Vue({
    mixins: [baseOptions],
    created(){
        //do something
        console.log('onCreated-2');
    }
    //其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2

extends：声明扩展另一个组件(可以是一个简单的选项对象或构造函数)。这主要是为了便于扩展单文件组件，与mixins 类似，剩下的差别大概是mixins接受数组，它是选项对象。

new Vue({
    extends: baseOptions,
    created(){
        //do something
        console.log('onCreated-2');
    }
    //其他自定义逻辑
});
// -> onCreated-1
// -> onCreated-2

3、创建一个vue的“子类”，使用new extend的构造函数，注册局部组件（局部组件也可以是单文件组件，使用导入的方式注册），局部组件在子组件中不可用。参数与Vue一样，注意：data选项是函数，没有el等实例才有的选项。new的实例使用的propsData，而不是props。

var author = Vue.extend({
  template: "<p><a :href='url'>{{author}} & {{name}}</a></p>",
  data : function() {
    return {
      author : 'vamous',
      url : 'http://blog.csdn.net/Dear_Mr/article/details/72614370'
    }
  }，
　　props : ['name']
});
//对应html：自定义无参数标签
<author></author>
//必须要挂载才可以使用
//使用propsData给实例的props传递参数
new author({propsData: {name : 'dear_mr'}}).$mount('author');

//对应html还可以是普通标签
<div id="author"></div>
//挂载方式
new author().$mount('#author');

extend写法不但要创建构造器，还要new一个实例，还要挂载到特定的元素上，这个特定元素最终还被完全替换了，不像component用起来那么舒服，注册好特定的名字之后，想在哪里用，就在哪里写组件名，程序还更易读。

所以说extend到底有什么优势呢？

生成的实例并不一定要"挂载到一个元素上"。

也就是 new 实例().$mount() 的参数可以为空，但他依旧能生成一个实例。生成的实例里面有$el这个参数，通过document.body.appendChild( 实例.$el），这个dom想插哪里插哪里。

component是extend的亲民版，但在实现某些特殊需求的时候，就需要用到extend，如alert组件，你肯定希望alert可以动态插入到body中，而不需要在dom文档流中放一个莫名其妙的alert，大部分时间他还是隐藏的。

Vue.nextTick( [callback, context] )：从2.1起，返回一个promise。在下次 DOM 更新循环结束之后（这是个什么场景？）执行延迟回调（这个回调在哪里传入？）。在修改数据之后立即使用这个方法，获取更新后的 DOM（获取拿来干嘛？）。

Vue.set( target, key, value )：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。注意对象不能是 Vue 实例，或者 Vue 实例的根数据对象。

在实例上的调用形式：vm.$set

使用场景：

1、vm实例创建后新添属性。

2、Vue 不能检测以下变动的数组（vue能检测到并触发视图更新的方法）：

　　a、当利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue　　

　　解决：

　　（1）Vue.set(vm.items, indexOfItem, newValue)

　　（2）vm.items.splice(indexOfItem, 1, newValue)

　　（3）vm.$set(vm.items, indexOfItem, newValue)

　　b、当修改数组的长度时，例如：vm.items.length = newLength

解决：vm.items.splice(newLength)

Vue.delete( target, key )：删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。这个方法主要用于避开 Vue 不能检测到属性被删除（这句话什么意思？），但是你应该很少会使用它。目标对象不能是一个 Vue 实例或 Vue 实例的根数据对象。

Vue.directive( id, [definition] )：注册或获取全局指令，见自定义指令。

//返回已注册的指令
var myDirective = Vue.directive('my-directive')

Vue.filter( id, [definition] )：注册或获取全局过滤器，查看博文vue构造器参数之filters过滤器。

Vue.component( id, [definition] )：注册或获取全局组件，Vue.component类是Vue类的子类，第一个参数是组件名称，建议使用小写+‘-’的形式，在使用时，也是这个形式。

// 注册组件，传入一个扩展过的构造器
Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象 (自动调用 Vue.extend)，等价于上行代码.
Vue.component('my-component', { /* ... */ })

// 获取注册的组件 (始终返回构造器)
var MyComponent = Vue.component('my-component')

基础组件的自动化全局注册：解决每个文件一长串的import基础组件

import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'

自动注册，在new根实例之前：

使用 require.context 全局注册通用的基础组件。这里有一份可以让你在应用入口文件 (比如 src/main.js) 中全局导入基础组件的示例代码：

import Vue from 'vue'
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

const requireComponent = require.context(
  // 其组件目录的相对路径
  './components',
  // 是否查询其子目录
  false,
  // 匹配基础组件文件名的正则表达式
  /Base[A-Z]\w+\.(vue|js)$/
)

requireComponent.keys().forEach(fileName => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的 PascalCase 命名
  const componentName = upperFirst(
    camelCase(
      // 剥去文件名开头的 `./` 和结尾的扩展名
      fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
    )
  )

  // 全局注册组件
  Vue.component(
    componentName,
    // 如果这个组件选项是通过 `export default` 导出的，
    // 那么就会优先使用 `.default`，
    // 否则回退到使用模块的根。
    componentConfig.default || componentConfig
  )
})

Vue.use( plugin )：安装 Vue.js 插件，包括个人组件/插件。该方法需要在调用 new Vue() 之前被调用。

Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。然而在例如 CommonJS 的模块环境中，要显式地调用 Vue.use()

Vue.compile( template )：编译的意思，在 render 函数（渲染函数）中编译模板字符串。只在独立构建时有效。

var res = Vue.compile('<div><span>{{ msg }}</span></div>')

new Vue({
  data: {
    msg: 'hello'
  },
  render: res.render,
  staticRenderFns: res.staticRenderFns
})

Vue.observable( object )：返回的对象可以直接用于渲染函数和计算属性内，并且会在发生改变时触发相应的更新。

在 Vue 3.x 中，返回一个可响应的代理，而对源对象直接进行修改仍然是不可响应的。因此，推荐操作返回的对象，而不是源对象。