1.路由參數(shù)解耦

　　通常在組件中使用路由參數(shù)，大多數(shù)人會做以下事情。

　　在組件中使用 $route 會導(dǎo)致與其相應(yīng)路由的高度耦合，通過將其限制為某些 URL 來限制組件的靈活性。

　　正確的做法是通過 props 來解耦。

　　將路由的 props 屬性設(shè)置為 true 后，組件內(nèi)部可以通過 props 接收 params 參數(shù)。

　　您還可以通過功能模式返回道具。

　　2.功能組件

　　功能組件是無狀態(tài)的，它不能被實例化，也沒有任何生命周期或方法。創(chuàng)建功能組件也很簡單，只需在模板中添加功能聲明即可。

　　它一般適用于只依賴于外部數(shù)據(jù)變化的組件，并且由于其輕量級而提高了渲染性能。

　　組件需要的一切都通過上下文參數(shù)傳遞。它是一個上下文對象，具體屬性見文檔。這里的 props 是一個包含所有綁定屬性的對象。

　　父組件使用

　　3.樣式范圍

　　開發(fā)中修改第三方組件樣式很常見，但是由于scoped屬性的樣式隔離，可能需要去掉scoped或者另起一個樣式。這些做法有副作用(組件樣式污染，缺乏優(yōu)雅)，在css預(yù)處理器中使用樣式滲透來生效。

　　我們可以使用 >>> 或者 /deep/ 來解決這個問題：

　　4.watch的高級使用

　　watch 在監(jiān)聽器屬性發(fā)生變化時觸發(fā)，有時我們希望 watch 在組件創(chuàng)建后立即執(zhí)行。

　　可能想到的方式是在創(chuàng)建生命周期中調(diào)用它一次，但這不是一種優(yōu)雅的編寫方式，所以也許我們可以使用這樣的東西。

　　Deep Listening

　　監(jiān)聽一個對象時，當(dāng)對象內(nèi)部的屬性發(fā)生變化時，watch是不會被觸發(fā)的，所以我們可以為它設(shè)置深度監(jiān)聽。

　　觸發(fā)監(jiān)聽器執(zhí)行多個方法

　　使用數(shù)組，您可以設(shè)置多個形式，包括字符串、函數(shù)、對象。

　　5.watch監(jiān)聽多個變量

　　watch 本身不能監(jiān)聽多個變量。但是，我們可以通過返回具有計算屬性的對象然后監(jiān)聽該對象來“監(jiān)聽多個變量”。

　　6.事件參數(shù)$event

　　$event 是事件對象的一個特殊變量，它在某些場景下為我們提供了更多的可用參數(shù)來實現(xiàn)復(fù)雜的功能。

　　本機事件：與本機事件中的默認(rèn)事件對象行為相同。

　　自定義事件：在自定義事件中表示為捕獲從子組件拋出的值。

　　7.程序化事件監(jiān)聽器

　　例如，在頁面掛載時定義一個定時器，需要在頁面銷毀時清除定時器。這似乎不是問題。但仔細(xì)觀察，this.timer 的唯一目的是能夠在 beforeDestroy 中獲取計時器編號，否則是無用的。

　　如果可能，最好只訪問生命周期掛鉤。這不是一個嚴(yán)重的問題，但可以認(rèn)為是混亂。

　　我們可以通過使用 或once 監(jiān)聽頁面生命周期銷毀來解決這個問題：

　　使用這種方法，即使我們同時創(chuàng)建多個定時器，也不影響效果。這是因為它們將在頁面被銷毀后以編程方式自動清除。

　　8.監(jiān)聽組件生命周期

　　通常我們使用 $emit 監(jiān)聽組件生命周期，父組件接收事件進(jìn)行通知。

　　子組件

　　父組件

　　其實有一種簡單的方法就是使用@hook 來監(jiān)聽組件的生命周期，而不需要在組件內(nèi)部做任何改動。同樣，創(chuàng)建、更新等也可以使用這個方法。

　　總結(jié)

　　以上就是我今天跟你分享的8個關(guān)于Vue的開發(fā)技巧，希望這些小技巧對你有用。