參考文章：10個(gè)Vue開發(fā)技巧

一、路由參數(shù)解耦

知道這個(gè)寫法，但是沒有使用過，可參考筆記vue-router?五。

二、函數(shù)式組件

函數(shù)式組件是無狀態(tài)的，無法實(shí)例化，沒有任何生命周期和方法。創(chuàng)建函數(shù)式組件，只需要在template 標(biāo)簽上加 functional即可。一般只適合依賴于外部數(shù)據(jù)的變化而變化的組件，因其輕量，渲染性能也會(huì)有所提高。

組件需要的一切都是通過context參數(shù)傳遞?？梢酝ㄟ^props取到所有傳入的attribute。

三、樣式穿透

看到過這種寫法，但是以前一直不太確定應(yīng)用范圍。

第三方組件的樣式常常被scoped了，但是我們有時(shí)會(huì)需要修改第三方組件樣式，這時(shí)就可以使用 '>>>' 或 '/deep/'來解決這個(gè)問題

四、watch高階寫法

1.立即執(zhí)行

watch是在監(jiān)聽屬性改變時(shí)才會(huì)觸發(fā)，但是有時(shí)我們希望在組件創(chuàng)建后watch能夠立即執(zhí)行，只需要在監(jiān)聽的這個(gè)屬性里設(shè)置immediate為truej就好了。

以前就看過這個(gè)寫法，但是不知道用在什么地方。好像前段時(shí)間有需要用到這個(gè)屬性，但是沒想起來這個(gè)用法，用別的方式解決的。

2.深度監(jiān)聽

常用

3.一個(gè)屬性觸發(fā)watch時(shí)可以執(zhí)行多個(gè)方法

用數(shù)組設(shè)置多個(gè)方法

五、watch監(jiān)聽多個(gè)變量

watch本身做不到，但是我們可以講需要監(jiān)聽的多個(gè)變量通過計(jì)算屬性返回一個(gè)對(duì)象，再深度監(jiān)聽這個(gè)對(duì)象來實(shí)現(xiàn)多個(gè)變量的監(jiān)聽

六、事件參數(shù)$event

1.原生事件中表現(xiàn)和默認(rèn)事件對(duì)象相同

2.自定義事件中則是被拋出的值

七、自定義組件的雙向綁定

知道相應(yīng)的寫法，可參考筆記vue官方指南深入部分筆記?三(2)。

八、監(jiān)聽組件的生命周期

直接在使用組件時(shí)用@hook:mounted="listenMounted"，不需要在組件內(nèi)部的生命周期中拋出自定義事件。

九、程序化的事件偵聽器

知道相應(yīng)的寫法，可參考筆記vue官方指南深入部分筆記?六(2)。

十、手動(dòng)掛載組件

比如一個(gè)彈窗組件，最理想的用法是通過命令式調(diào)用，而不是在模板中通過狀態(tài)切換。通過vue.extend()和$mount來實(shí)現(xiàn)。