Vue ---day03

nextTick： 當數據改變時，dom元素不會當即改變，獲取更新後的DOM。

　　Vue.nextTick(funciton(){})

　　vm.$nextTick(function(){})

　　vm.$nextTick().then();   沒有提供回調函數且支持Promise環境中，則返回一個 Promise。（注意vue不自帶 Promise的 polyfill）

Vue生命週期：生命週期鉤子自動綁定this上下文到實例中。 this指向vm

　　建立階段  created 數據觀測 ，屬性和方法的運算，watch/event 事件回調---實例已完成的配置， $el屬性尚不可用

　　掛載階段  mounted實例被掛載後調用，el 被新建立的  vm.$el 替換

　　更新階段

　　銷燬階段

　　errorCaptured    (err: Error, vm: Component, info: string) => ?boolean

內置組件

　　component    動態組件的問題  <component :is="componentId"></component>   （多個組件切換，避免在模板中作大量的判斷）--組件依然會重複建立和銷燬

　　transition        

　　transition-group

　　keep-alive   保留組件和數據狀態，  避免重複調用 created和destroy  （做用於直接子組件被開關的狀況，且只有一個子元素被渲染）

　　slot  組件模板的內容分發插槽   或 避免傳給子組件props內容太長

　　　　slot組件和組件模板在一個做用域內

　　　　slot內部定義組件包含的元素（定義影子 DOM）

　　　　影子dom和組件模板不在一個做用域內（不能直接訪問組件內部數據）

　　　　經過slot組件向 影子DOM傳遞參數

　　　　影子DOM在這裏實際上也是一個子組件

安裝插件

　　Vue.use(plugin)

　　若是插件是一個對象，必須提供 install 方法。若是插件是一個函數，它會被做爲 install 方法。

　　install 方法調用時，會將 Vue 做爲參數傳入。（obj.install方法接收的第一個參數是Vue，第二個參數是 options）

　　在調用 new Vue() 以前調用；

　　插件只會被安裝一次

 

爲自定義選項注入處理邏輯

　　Vue.mixin(Object)  全局的

　　　　影響每個以後建立的 Vue 實例，包括第三方組件

　　　　只應當應用於自定義選項--如 下面的 myOption 選項（vue內部時沒有的）

　　　　建議做爲插件發佈，避免重複發佈

　　Vue.mixin({

　　　　created: function () {  // 生命週期能夠重複

　　　　　　　　var myOption = this.$options.myOption

　　　　　　　　 if (myOption) { console.log(myOption) }  // ===> 'hello!'

　　　　}

　　 })

　　new Vue({

　　　　myOption: 'hello!'   // myOption 爲自定義選項

　　})

 

 

// 發佈插件的一個例子 ----   給實例添加 http 選項

　　// 定義一個插件

　　function axios(){ console.log("axios");}

　　.................................................................Vue.prototype.http = axios;  //改Vue的原型，不推薦

　　Vue.use(function(_Vue){

　　　　_Vue.mixin({

　　　　　　beforeCreate: function(){

　　　　　　　　console.log('beforeCreate1');

　　　　　　　　if(this.$options.adaptor){   // this  每個組件實例 

　　　　　　　　　　this.$http = this.$options.http;

　　　　　　　　}

　　　　　　　　if(this.$options.parent && this.$options.parent.$http){  // 給子組件增長 方法

　　　　　　　　　　this.$http = tthis.$options.parent.$http

　　　　　　　　}

　　　　　　}

　　　　});

　　})

 

　　new Vue({

　　　　el:"#pp",

　　　　adaptor: axios, //  定義了一個 http 庫

　　　　beforeCreate:function(){

　　　　　　console.log("實例beforeCreate2");

　　　　}

　　})