麻豆黑色丝袜jk制服福利网站-麻豆精品传媒视频观看-麻豆精品传媒一二三区在线视频-麻豆精选传媒4区2021-在线视频99-在线视频a

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 8個很棒的Vue開發技巧

8個很棒的Vue開發技巧

來源:千鋒教育
發布人:wjy
時間: 2023-01-06 11:26:00 1672975560

  1.路由參數解耦

  通常在組件中使用路由參數,大多數人會做以下事情。

8個很棒的Vue開發技巧1

  在組件中使用 $route 會導致與其相應路由的高度耦合,通過將其限制為某些 URL 來限制組件的靈活性。

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

8個很棒的Vue開發技巧2

  將路由的 props 屬性設置為 true 后,組件內部可以通過 props 接收 params 參數。

8個很棒的Vue開發技巧3

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

8個很棒的Vue開發技巧4

  2.功能組件

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

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

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

8個很棒的Vue開發技巧5

  父組件使用

8個很棒的Vue開發技巧6

8個很棒的Vue開發技巧7

  3.樣式范圍

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

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

8個很棒的Vue開發技巧8

8個很棒的Vue開發技巧9

  4.watch的高級使用

  watch 在監聽器屬性發生變化時觸發,有時我們希望 watch 在組件創建后立即執行。

  可能想到的方式是在創建生命周期中調用它一次,但這不是一種優雅的編寫方式,所以也許我們可以使用這樣的東西。

8個很棒的Vue開發技巧10

  Deep Listening

  監聽一個對象時,當對象內部的屬性發生變化時,watch是不會被觸發的,所以我們可以為它設置深度監聽。

8個很棒的Vue開發技巧11

  觸發監聽器執行多個方法

  使用數組,您可以設置多個形式,包括字符串、函數、對象。

8個很棒的Vue開發技巧12

  5.watch監聽多個變量

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

8個很棒的Vue開發技巧13

  6.事件參數$event

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

  本機事件:與本機事件中的默認事件對象行為相同。

8個很棒的Vue開發技巧14

8個很棒的Vue開發技巧15

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

8個很棒的Vue開發技巧16

8個很棒的Vue開發技巧17

8個很棒的Vue開發技巧18

  7.程序化事件監聽器

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

8個很棒的Vue開發技巧19

  如果可能,最好只訪問生命周期掛鉤。這不是一個嚴重的問題,但可以認為是混亂。

  我們可以通過使用 或once 監聽頁面生命周期銷毀來解決這個問題:

8個很棒的Vue開發技巧20

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

  8.監聽組件生命周期

  通常我們使用 $emit 監聽組件生命周期,父組件接收事件進行通知。

  子組件

8個很棒的Vue開發技巧21

  父組件

8個很棒的Vue開發技巧22

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

8個很棒的Vue開發技巧23

  總結

  以上就是我今天跟你分享的8個關于Vue的開發技巧,希望這些小技巧對你有用。

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
開班信息
北京校區
  • 北京校區
  • 大連校區
  • 廣州校區
  • 成都校區
  • 杭州校區
  • 長沙校區
  • 合肥校區
  • 南京校區
  • 上海校區
  • 深圳校區
  • 武漢校區
  • 鄭州校區
  • 西安校區
  • 青島校區
  • 重慶校區
  • 太原校區
  • 沈陽校區
  • 南昌校區
  • 哈爾濱校區
主站蜘蛛池模板: 国产zzjjzzjj视频全免费| 美女张开双腿让男生捅| 亚洲一区二区三区久久久久| 女人色极影院| 含羞草实验室入口免费网站直接| 久久亚洲国产精品五月天婷| 欧美精品国产综合久久| 久久伊人精品一区二区三区| 里番acg※里番acg本子全彩| 一本一本久久a久久精品综合| 亚洲综合无码一区二区| 夜里18款禁用的视频软件| 别揉我胸啊嗯~| 羞羞答答xxdd影院欧美| 日本久久久久中文字幕| 男男动漫全程肉无删减有什么| 欧美亚洲人成网站在线观看刚交 | 成人毛片全部免费观看| 1000又爽又黄禁片在线久| 健身私教干了好几次| 骚虎影院在线观看| 麻豆精品不卡国产免费看| 久久精品免费一区二区三区| 97久久精品午夜一区二区| 亲密爱人完整版在线观看韩剧 | 深夜动态福利gif动态进| 波多野たの结衣老人绝伦 | 久久亚洲私人国产精品va | 男人操女人免费视频| 福利二区视频| 国产国产精品人在线观看| 日本在线理论片| 狠狠穞老司机的福67194| 中文字幕亚洲综合久久| 三男挺进一女爽爽爽视频| 国产伦理一区二区三区| 精品国产v无码大片在线观看| 露点的诱惑| 好男人在线社区www| 国产三级在线免费| 亚洲日韩精品欧美一区二区|