全局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');
    }
};

使用：

一、extend常服務於Vue.component用來生成組件，這是註冊全局組件，能夠在任意實例的components裏使用。

使用示例：全局提示組件，全局的網頁底部，動態建立全局組件（插件 ），用Vue.extend構建消息提示組件。（網頁底部組件：建立的組件的dom結構，直接在body底部插入，在vue的app實例範圍外，建立以後，該組件仍然能夠響應組件內的數據。）

Vue.component('global-component', Vue.extend(baseOptions));
//傳入一個選項對象（自動調用 Vue.extend）,等價於上行代碼.
Vue.component('global-component', baseOptions);

二、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

三、建立一個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

使用場景：

一、vm實例建立後新添屬性。

二、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 中，返回一個可響應的代理，而對源對象直接進行修改仍然是不可響應的。所以，推薦操做返回的對象，而不是源對象。