給小夥伴們分享一下我在vue開發中使用的技巧（適合收藏），希望能對正在使用vue的小夥伴們能夠有所幫助，話不多說，直奔主題。
1、使用v-for動態渲染components
import one from ‘@/components/one。vue’import two from “@/components/two。vue”；export default{ components：{ one， two } }
接下來v-for動態元件的使用
componentsList：［‘one’，‘two’］
編譯以後的效果就是
2、學會使用watch來簡化你的程式碼
watch預設繫結，頁面首次載入時，是不會執行的。只有值發生改變才會執行，所以有些小夥伴會採取在create或者mounted中再執行一次，
immediate為 true 或 false；immediate ： true 代表如果在 watch 裡聲明瞭之後，就會立即先去執行裡面的 handler 方法，如果為 false 就跟我們以前的效果一樣，不會在繫結的時候就執行
watch：{ ‘$route。query。id’：{ handler（newName，oldName）{ this。getFormData（） //執行程式碼 }， } }， mounted （） { this。getFormData（） ； }，
其實只需要這樣：
watch：{ ‘$route。query。id’：{ handler（newName，oldName）{ this。getFormData（） //執行程式碼 }， immediate：true //true就表示會立即執行 } }
如果是監聽的是物件型別，當手動修改物件的某個屬性時，發現是無效的
其值是 true 或 false ；確認是否深入監聽。deep 的意思就是深入觀察，監聽器會一層層的往下遍歷，給物件的所有屬性都加上這個監聽器（受現代 JavaScript 的限制 （以及廢棄 Object。observe ），Vue 不能檢測到物件屬性的新增或刪除）
data：{ form：{ name：“zs” }}，watch：{ form：{ handler（newName，oldName）{ //執行程式碼 }， deep：true }}
3、使用this$on簡化window監聽
平常的使用方法
mounted（） { this。$nextTick（（） => { this。f_getTableHeight（）； //獲取表格高度 window。onresize = （） => { //事件會在視窗或框架被調整大小時發生 this。f_getTableHeight（）； }； }）；； }， beforeRouteLeave（to， from， next） { //元件銷燬時銷燬onresize方法 window。onresize = null； next（）； }，
改寫以後的程式碼
mounted （） { this。$nextTick（（） => { window。addEventListener（‘resize’， this。resizeHandler）； this。$on（“hook：beforeDestroy”， （） => { beforeRouteLeave }）；； }）}
這樣寫的好處在於可以開啟一個事件監聽器的同時，就在beforeDestroy生命週期中掛載一個刪除事件監聽器的事件。比上面的寫法會更加安全，更加有助於避免記憶體洩露並防止事件衝突
4、v-pre
5、v-once
v-pre與v-once的區別：
v-pre相當於不編譯，直接顯示，v-once相當於只編譯一次，後面的更新不編譯了
6、this。$forceUpdate（）
當資料層級過深的時候，有時候vue會神經的不更新試圖，可以強制使用this。$forceUpdate（）進行渲染
7、keep-alive
一個頁面不需要在返回的時候重新呼叫介面的時候，想要儲存之前的狀態，就可以使用keep-alive快取，比如點進去一個詳情頁再返回的時候不想更新列表。
8、query傳值
在進行重新整理的時候，傳給當前頁面的資料不會丟失
9、全域性路由鉤子
router。beforeEach（（to， from， next） => { //呼叫next（）才能到下一個頁面 //to可以拿到需要跳轉的路由資訊 if （path === ‘/login’） { next（） }else{ token？next（）：next（‘/login’） }}）
10、Object。freeze（）
vue使用Object。defineProperty進行雙向繫結，對於不需要改變的資料，比如列表，可以使用Object。freeze（）進行凍結，使它無法被修改，提高效能。
getList（）。then（res=>{ this。list=Object。freeze（res。data。result）；}）
11、v-for不建議配合v-if
v-for的優先順序比v-if高，所以在進行列表展示的時候有些值不需要展示，但是v-for已經把所有的都迴圈了一遍了，對於不想使用的屬性可以使用計算屬性先過濾一遍，提高效能。
12、v-for繫結key不建議使用index
建議使用另外的並且值唯一的變數，例如後臺給你的id，key正在同一個頁面上無論有多少個v-for都應該是唯一的值
13、mixins混入的使用
我這裡封裝了一個計算表格高度的mixins
// 建立一個需要混入的物件import { mapGetters} from “vuex”；export const mixin = { data（） { return { tableHeight： “400”， } }， mounted（） { this。$nextTick（（） => { this。f_getTableHeight（）； //獲取表格高度 window。onresize = （） => { //事件會在視窗或框架被調整大小時發生 this。f_getTableHeight（）； }； }）；； }， beforeRouteLeave（to， from， next） { //元件銷燬時銷燬onresize方法 window。onresize = null； next（）； }， computed： { 。。。mapGetters（［“titleHeight”］） }， watch： { titleHeight（） { this。f_getTableHeight（）； } }， methods： { //計算表格高度 f_getTableHeight（） { //等待 DOM 更新 let toolbarHeight = this。$refs。toolbarHeight。offsetHeight； this。tableHeight = window。innerHeight - toolbarHeight - this。subtractionHeight - this。titleHeight； }， }}；
其他頁面中使用
//其他頁面使用import { resize } from “@/components/mixins/resize”；export default { mixins： ［resize］， //表格自適應}
1、mixins混入此頁面中的程式碼優先執行
2、當混入中的屬性或者方法與此頁面中的屬性或者方法名稱相同時，此頁面中的值為準（結合上一條規則，因為混入先執行，所以此頁面中的會將混入覆蓋）
3、比方說A頁面和B頁面都使用了同一個混入，A頁面與B頁面的狀態同樣是獨立的
