vue全局API

 

一。Vue.extend()  

顧名思義  extend  繼承，官方給出的解釋是   （使用基礎 Vue 構造器，建立一個「子類」。參數是一個包含組件選項的對象。）

Vue構造器是指  vue是一個構造函數， 因此在編寫代碼的時候被稱之爲構造器

Vue.extend()  看起來和new Vue（） 有點像 他們的區別在於

new Vue是一個實例

vue.extend 組件構造器 須要傳入component進行註冊

vue.component直接註冊組件內部已經自動構造了

 

<div id=app"></div> 
// 建立構造器
 var newApp = Vue.extend({ 
　　template: '<p>{{firstName}} {{lastName}}</p>', 
　　data: function () { return { firstName: 'zhang', lastName: 'San', } } 
})
 // 建立 newApp 實例，並掛載到一個元素上。 
new newApp().$mount('#app')

 

  

 

二。Vue.nextTick（）

官方文檔中解釋在下次 DOM 更新循環結束以後執行延遲迴調。在修改數據以後當即使用這個方法，獲取更新後的 DOM。

那麼DOM 更新循環是什麼 ，何時循環

就是說vue在修改數據後  不會馬上去更新dom，須要在同一事件循環結束後纔會去統一更新此次有變更的DOM

好比說v-if  記得從網上看到過例子

 

 

這個nexttick  就是在事件循環結束後當即被調用的 在下一個事件循環的上邊 和異步回調的感受差很少  等dom更新  當即執行

另外用定時器（settimeout（fun，0））也能夠操做更新完以後的DOM

三。vue.set

 官方解釋 vue.set向響應式對象中添加一個屬性，並確保這個新屬性一樣是響應式的，且觸發視圖更新。

它必須用於向響應式對象上添加新屬性，由於 Vue 沒法探測普通的新增屬性 

因爲 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，因此屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。

四。vue.delete

刪除對象的屬性。若是對象是響應式的，確保刪除能觸發更新視圖。這個方法主要用於避開 Vue 不能檢測到屬性被刪除的限制，可是你應該不多會使用它。

 

 

 

delete this.xxx.xxx;//js方法

Vue.delete(this.xxx,'xxx');//vue方法

這兩個效果是同樣的   注意不能刪除vue的實例和根屬性

 

五。Vue.directive

Vue.directive這個比較常見  它用於註冊自定義指令，註冊全局自定義指令  也能夠在組建裏邊局部註冊指令

下邊是vue提供的一些鉤子函數

Vue.directive('my-directive', {
  bind: function () {},//綁定時
  inserted: function () {},//插入時
  update: function () {},//虛擬DOM節點更新以前
  componentUpdated: function () {},//組件和子虛擬DOM更新完成後
  unbind: function () {}//解綁時
})

這些鉤子函數會在執行對應操做的時候執行，這些鉤子函數裏邊有不少屬性，有時間能夠打印一下玩一玩，時間關係不一一介紹了

這個函數做用就是讓mv層和V層分離  避免在V層操做DOM

六。Vue.filter

Vue.filter過濾哈  這個很常見   篩選數據常常用到

// 官方的例子
// 註冊
Vue.filter('my-filter', function (value) {
  // 返回處理後的值
})

// getter，返回已註冊的過濾器
var myFilter = Vue.filter('my-filter')

我我的就感受和 Array.includes封裝一下沒什麼區別（剛接觸不久，有不對的地方歡迎來噴）

七。vue.mixin

全局混入，會影響註冊以後全部建立的每一個 Vue 實例，若是生命週期裏的方法重名的話會執行全部方法

謹慎使用全局混入對象，由於會影響到每一個單首創建的 Vue 實例 (包括第三方模板)

具體參考  vue混入

八。propsData

 

 在建立實例的時候給props傳值

 

 

var Comp = Vue.extend({
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
})

var vm = new Comp({
  propsData: {
    msg: 'hello'
  }
})

 

九。watch

 

 watch: {
　　　// a 發生改變的時候會執行下邊的方法  傳入兩個參數  第一個是變化後的值
　　　　　第二個是變化以前的值

    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
// 深度監聽
    c: {
　　　　//舉個例子  好比說一個對象的屬性他仍是一個對象  
那麼這個時候淺度監聽就不會去監聽裏邊的數值，而深度監聽能夠監聽到

      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 該回調將會在偵聽開始以後被當即調用
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
  }

深度監聽的原理 我的感受是遞歸，一層層的去監聽直到沒有爲止，沒有必要的話儘可能不要使用

十。parent

我在個人子組件表格中打印 ，能夠訪問父實例的值，  注意是父實例

同理還有$children   這個能夠訪問到該組件子組件的值

不過 $parent 和 $children  我發現他們是有做用域的  他們會一層一層的往上訪問  並不會像 props 和 events那樣一步到位i

這個我也想到了一個應用場景，咱們在項目中用的是element-ui，表格組件修改有時候是比較麻煩的

就是說咱們的美工有時候會提出一些很難實現（讓人匪夷所思。。）的樣式  能夠用這個修改樣式的話感受比較方便

有不足或講的不對的地方，請批評指正