在非父子元件中是無法直接通訊的。
在vue中除了vuex可以統一管理狀態，還有另外一種方法叫事件匯流排
原理：
在vue原型中建立vue例項，利用vue的事件匯流排進行發射接收
注意：使用$bus要在destroyed生命週期函式中使用$off銷毀，要不然會疊加觸發次數
//全域性銷毀:當這個元件銷毀的時候bus也跟著一起銷毀
this.$bus.$off('事件名')
//區域性銷毀:如果你需多次呼叫匯流排，可以區域性銷毀
//把箭頭函式賦值給乙個變數名，銷毀時只需要銷毀變數即可
this.myfun = ()=>
this.$bus.$off('事件名稱',this.myfun)
可以當使用者在300ms內持續輸入時，取消資料請求，過了時間後再傳送資料，緩解伺服器壓力。
這種操作就叫做防抖處理
//es6寫法
debounce(fun,delay),delay)
}}//es5寫法
function debounce(fun,delay),delay)
}}
知識點：setimeout會返回乙個id池，通過cleartimeout內傳入id值來取消timeout
第一次執行，沒有timer跳過，直接執行settimeout
第二次執行，拿到了settimeout第一次返回的timer，在delay時間內被清空。然後繼續執行settimeout
第三十次，重複到第29次timer清空，執行settimeout。這時沒有第31次了，直接執行setimeout內的函式
使用方法
傳入函式和延時const backfun = debounce(function,delay)。
//這裡function如果是乙個方法不要加()，如果是待執行操作則巢狀再箭頭函式內傳遞。
呼叫返回函式backfun()
args是如果在呼叫backfun()時，裡面可以傳引數，(...args)時es6陣列解構，可以傳多個引數
示例：
//預設已經編寫好上面的防抖函式
let delay = 1000;
const myfun = function(e)
const backfun = debounce(myfun,delay);
const btnele = document.queryselector('#btn');
btnele.onclick = function ()
如果我們在多個頁面中使用防抖函式，可把防抖函式封裝成函式匯出
把使用方法封裝在mixin中，並把debouce返回的函式用data的屬性來儲存，不要用const或let
好處一、混入返回的是新的變數，不會影響原來的頁面
好處二、如果在函式中呼叫，data儲存可以防止防抖函式不斷銷毀重新建立的問題
節流函式是用來限制乙個函式被呼叫的頻率。使用場景如遊戲：飛機大戰，我們按鍵速度再快，飛機都一直按照固定頻率發射子彈。
節流函式與防抖函式實現方式不同，我們採用時間戳的方式來完成：
使用last變數來記錄上次的執行時間
每次執行前，把當前時間儲存到now，當now-last > interval則執行函式
函式執行時再將now賦值給last
function throttle(fn,interval)
}}
now - last < interval沒有被滿足
我們可以在最後一次執行的設定乙個settimeout定時器，如果不滿足條件now - last < interval則執行定時器的內容
function throttle(fn,interval)
last = now;
}else if(time === null),interval) //這裡如果要嚴謹一點，可以改成interval - （now - last）
}}}
mixin中可以看作類似vue例項，data/methods/生命週期函式等都可以在mixin中復用
繼承和混入的區別：繼承是繼承原來的變數，混入是返回乙個新的變數
使用示例
匯出mixin
export let mymixin =
},methods:
}};
在需求頁匯入
import from "./mixin";
new vue(
})
在vue中如果我們匯入元件還需要再特定位置引用和設定引數等，我們可以把乙個元件封裝成乙個外掛程式，
直接一行**就可以使用封裝的元件
這裡以toast顯示外掛程式為例。自己如果有更好的**也可以用如下步驟進行封裝
元件toast的**就是乙個methods方法，呼叫顯示文字。
這裡就不引入了，自己按需建立。只講解外掛程式封裝過程
//3.匯入toast元件
import toast from "./toast";
//1.建立index檔案，封裝物件並匯出
const obj = {};
//2.當使用vue.use時自動執行install，並且會把vue傳遞進去
obj.install = function (vue) ;
export default obj
import toast from './toast'
vue.use(toast)
通過this.$toast來呼叫物件(元件)toast的方法把~
this.$toast.show();
除了核心功能缺省內置的指令 (v-model和v-show)
當你需要對普通 dom 元素進行底層操作，這時候就會用到自定義指令
// 註冊乙個全域性自定義指令 `v-focus`
vue.directive('focus',
})//註冊乙個區域性元件指令
directive:
}}
乙個定義指令物件，除了inserted，還可以使用如下幾個鉤子函式：
鉤子函式引數
除了el之外，其它引數都應該是唯讀的
指令鉤子函式會被傳入以下引數：
vnode：vue 編譯生成的虛擬節點。
oldvnode：上乙個虛擬節點，僅在 update 和 componentupdated 鉤子中可用。
引數演示
使用示例
除了el之外，其它引數都是唯讀的，但指令的引數可以是動態的。
例如，在v-mydirective:[argument]="value"中，argument 引數可以根據元件例項資料進行更新！
//注意，這裡left和right用中括號包裹，通過data進行賦值
我固定在頁面左側100px處。
我固定在頁面右側100px處。
這對選項需要一起使用，以允許乙個祖先元件向其所有子孫後代注入乙個依賴，不論元件層次有多深，並在其上下游關係成立的時間裡始終生效。provide和inject主要在開發高階外掛程式/元件庫時使用。並不推薦用於普通應用程式**中。
provide：用來傳遞資料
基本使用方法：
// 父級元件提供 'foo'
provide: ,
})// 子元件注入 'foo'
vue.component('testcont', ,
props:}},
data ()
}})
//子元件
inject: // => foo
}
即來自不同的provide
//父元件
provide: ,
})//子元件
inject:
}
VUE開發技巧 高階版
product.routers.js在這裡插入 片 import product from views product.vue const routes export default routesad.routers.js import ad from views ad.vue const rout...
vue高階實戰技巧 如何優化專案
require.context 批量require檔案 1 以業務為模組建立相應的模組目錄 mode1 模組資料夾 pages 模版資料夾 model1.index.vue 模版檔案 model1.second.vue 模版檔案 index.routes.js 此模組的路由檔案index.route...
GDB高階技巧
本文主要示例一些平常較少使用到的gdb功能，掌握這些用法有助於提高gdb除錯和解決問題的能力。1 檢視巨集 預設情況下，在gdb中是不能檢視巨集的值及定義的，但通過如下方法，則可以達到目的 編譯源 時，加上 g3 gdwarf 2 選項，請注意不是 g 必須為 g3 檢視巨集的值使用命令p，這和檢視...