1.路由參數解耦
通常在組件中使用路由參數,大多數人會做以下事情。
在組件中使用 $route 會導致與其相應路由的高度耦合,通過將其限制為某些 URL 來限制組件的靈活性。
正確的做法是通過 props 來解耦。
將路由的 props 屬性設置為 true 后,組件內部可以通過 props 接收 params 參數。
您還可以通過功能模式返回道具。
2.功能組件
功能組件是無狀態的,它不能被實例化,也沒有任何生命周期或方法。創建功能組件也很簡單,只需在模板中添加功能聲明即可。
它一般適用于只依賴于外部數據變化的組件,并且由于其輕量級而提高了渲染性能。
組件需要的一切都通過上下文參數傳遞。它是一個上下文對象,具體屬性見文檔。這里的 props 是一個包含所有綁定屬性的對象。
父組件使用
3.樣式范圍
開發中修改第三方組件樣式很常見,但是由于scoped屬性的樣式隔離,可能需要去掉scoped或者另起一個樣式。這些做法有副作用(組件樣式污染,缺乏優雅),在css預處理器中使用樣式滲透來生效。
我們可以使用 >>> 或者 /deep/ 來解決這個問題:
4.watch的高級使用
watch 在監聽器屬性發生變化時觸發,有時我們希望 watch 在組件創建后立即執行。
可能想到的方式是在創建生命周期中調用它一次,但這不是一種優雅的編寫方式,所以也許我們可以使用這樣的東西。
Deep Listening
監聽一個對象時,當對象內部的屬性發生變化時,watch是不會被觸發的,所以我們可以為它設置深度監聽。
觸發監聽器執行多個方法
使用數組,您可以設置多個形式,包括字符串、函數、對象。
5.watch監聽多個變量
watch 本身不能監聽多個變量。但是,我們可以通過返回具有計算屬性的對象然后監聽該對象來“監聽多個變量”。
6.事件參數$event
$event 是事件對象的一個特殊變量,它在某些場景下為我們提供了更多的可用參數來實現復雜的功能。
本機事件:與本機事件中的默認事件對象行為相同。
自定義事件:在自定義事件中表示為捕獲從子組件拋出的值。
7.程序化事件監聽器
例如,在頁面掛載時定義一個定時器,需要在頁面銷毀時清除定時器。這似乎不是問題。但仔細觀察,this.timer 的唯一目的是能夠在 beforeDestroy 中獲取計時器編號,否則是無用的。
如果可能,最好只訪問生命周期掛鉤。這不是一個嚴重的問題,但可以認為是混亂。
我們可以通過使用 或once 監聽頁面生命周期銷毀來解決這個問題:
使用這種方法,即使我們同時創建多個定時器,也不影響效果。這是因為它們將在頁面被銷毀后以編程方式自動清除。
8.監聽組件生命周期
通常我們使用 $emit 監聽組件生命周期,父組件接收事件進行通知。
子組件
父組件
其實有一種簡單的方法就是使用@hook 來監聽組件的生命周期,而不需要在組件內部做任何改動。同樣,創建、更新等也可以使用這個方法。
總結
以上就是我今天跟你分享的8個關于Vue的開發技巧,希望這些小技巧對你有用。