成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

為什么很多人都不升級 Vue3.5?你知道嗎?

開發 前端
我還記得以前watchEffect這個 API 無論依賴改變前后相不相同,都會觸發watchEffect回調重新執行(性能問題),而響應式系統重構是徹底解決了這個性能問題!簡直太棒了!!

前言

大家好,我是林三心,用最通俗易懂的話講最難的知識點是我的座右銘,基礎是進階的前提是我的初心~

首先對 Vue 團隊 Respect,大佬們辛苦了!開發除了這么優秀的前端工具庫!

以下僅代表個人觀點~我知道沒人會在乎一個菜鳥到底用不用 Vue3.5 ,我只是發表了我的個人看法,這并不代表我不尊重 Vue,我超愛 Vue 的?。?!

其實早在 VueConf 2024 上,尤大就公布了Vue3.5的新特性,并且說明了目前該版本還在開發中,正處于 alpha 階段

圖片圖片

我調研了我們組的前端同事們,以及結合我個人的想法,我是覺得:我應該會跳過 Vue3.5 這個版本

說 3.5 之前,先回顧一下 3.4

在說 Vue3.5 之前,我想先先回顧一下 Vue3.4這個版本,因為我實在覺得 Vue3.4 太棒啦?。?!

以下是 Vue3.4 的特性:

1、徹底重構 parser,加快一倍

2、SFC 編譯 source map 優化,提速可達 50%

3、響應式系統重構,更精確的 computed 計算觸發

4、defineModel 成為穩定功能

5、v-bind 語法糖

除了 5、v-bind 語法糖 這一點我個人覺得對我沒啥用處以外,其他幾點 簡直太棒了?。?!

  • parser 重構、SFC 編譯 source map 優化: 這都是實打實地提升了編譯速度啊!編譯速度直接影響了開發體驗!簡直太棒了!!
  • 響應式系統重構: 我還記得以前watchEffect這個 API 無論依賴改變前后相不相同,都會觸發watchEffect回調重新執行(性能問題),而響應式系統重構是徹底解決了這個性能問題!簡直太棒了??!
  • defineModel: 以前封裝組件時涉及到父子數據雙向綁定時,都很麻煩,而有了defineModel 之后,瞬間簡單了!簡直太棒了??!

反觀 Vue3.5

說完Vue3.4,我們來反觀一下Vue3.5,我來說說為啥 我應該會跳過 Vue3.5 這個版本

Props 響應式解構

以前 Props 解構后就會丟失響應式,但是 Vue3.5 支持 Props 響應式解構了

圖片圖片

雖然我知道這個新特性挺實用的,但是我覺得對于我來說,好像用處不大,反而會對我的開發造成阻力,我始終覺得:props 還是不要解構的好

請看下面例子,我如果不解構,每個地方都用 props.count,那么我會很清楚 count 這個變量的數據是來源于 props,當組件內代碼太多的時候,這些代碼被擠到下面的時候,我還是能很清楚地分清 count 和 total 兩個變量數據來源的區別,前者是傳進來的,后者是本組件自己的

圖片圖片

但是如果你進行 Props 解構的話,那就是下面的場景,當本組件代碼很多的時候,而導致你看不到變量定義代碼時,請問你怎么區分 count 和 total 兩個變量數據來源?

圖片圖片

useTemplateRef

以前無論是響應式變量還是 組件實例獲取 ,都是使用 ref 去定義,可能會造成代碼視覺上的混淆

圖片圖片

所以 Vue3.5 推出了 useTemplateRef 來進行 組件實例獲取,從而跟 響應式變量 區分開

圖片圖片

但是其實就算沒有 useTemplateRef,使用過Typescript的朋友都知道,當響應式變量 和 組件實例獲取 都使用 ref 時,完全可以憑借 Typescript 去區分

圖片圖片

就算你不習慣Typescript吧,但是 useTemplateRef 也未必就適用于 組件實例獲取 的所有場景,比如 多組件實例獲取,這個時候你還是得用回 ref 啊。。

圖片圖片

useId

就是在組件內生成一個唯一的 ID,以便于在做一些邏輯時,與其他組件隔絕開來

圖片圖片

但是其實不太需要 useId,因為這種隔絕方式,很久很久以前就在用了,反正我自己的話使用的是 lodash 的 uniqueId

圖片圖片


內存優化 + 大數組優化

尤大說了,Vue3.5 中重構了響應式系統。使得**內存占用率減少了 60%**,牛?。。。。∵@一點確實是非常的好?。。?!

尤大還說到,Vue3.5 重構了很多數組方法,這讓大數組遍歷操作的雙速度提升了 10 倍。但是我覺得這個提升只是僅限于邏輯處理層面,但是 DOM 渲染該渲染慢還是那么慢

比如在 Vue3.5中,一個數組有 10w 條數據,并在頁面上遍歷渲染出 10w 個DOM節點,當你對這個數組進行操作時,速度比過往提升了 10 倍,但是頁面上的 10w 個DOM節點的重渲染該卡還是卡啊。。。

除非這些數組方法速度的提升,能帶動 DOM節點重渲染數的減少,不然僅僅在邏輯處理層面提升,貌似整體也提升不了很多,就比如下面代碼,模擬了 100w 個數據的處理

圖片圖片

其實也就耗時了 1.19s 而已(JavaScript 并沒有你想象中那么慢),提升 10 倍,也就是 0.1s

圖片圖片

耗時的大頭其實是在 DOM 渲染上,如果 DOM 渲染速度也能跟著提升 10 倍,那就真的無敵了?。?!

作為一個 Vue 開發者,我所期待的

其實很簡單,就是期望開發起來更加方便,所以 Vue Macros 里的很多超前 API 我都很期待。

Vue Macros官網:https://vue-macros.dev/zh-CN/

圖片圖片


小結

  • Vue3.4 真的很棒?。。?/span>
  • 我很可能會跳過 Vue3.5 這個版本,因為對我來說好像沒啥太大的飛躍
責任編輯:武曉燕 來源: 前端之神
相關推薦

2024-04-07 00:02:00

2024-09-02 08:48:45

2024-09-12 08:32:42

2018-02-13 14:48:17

戴爾

2022-12-05 15:23:33

JavaScript技巧運算符

2021-08-27 10:03:12

人工智能AI

2020-11-20 06:13:04

Like %

2020-11-17 08:30:06

LinuxSwapping 設計

2022-07-06 10:33:39

技術債務CIO

2017-12-13 15:57:12

2023-11-02 10:22:29

gRPC后端通信

2024-10-09 08:19:35

2025-02-21 08:48:16

Typescript內置聯合類型

2018-08-10 10:36:25

SSL證書誤區

2025-06-05 01:11:00

2024-10-12 14:58:07

2020-10-28 11:20:55

vue項目技

2023-12-20 08:23:53

NIO組件非阻塞

2024-04-30 09:02:48

2019-12-13 19:52:29

人工智能AI
點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板: 欧美国产一区二区 | 国产婷婷色综合av蜜臀av | 亚洲欧美成人在线 | 午夜视频免费在线观看 | 国产成人精品一区二区三区 | 日韩成人一区 | 精品av | 一级片aaa | 91传媒在线观看 | 黑人巨大精品 | 亚洲欧美网站 | 亚洲第一av网站 | 亚洲一区二区三区在线播放 | 国产在线精品一区二区三区 | 欧美最猛性xxxxx亚洲精品 | 国产激情视频网址 | 亚洲视频在线一区 | av在线一区二区三区 | 国产欧美一区二区三区日本久久久 | 国产欧美日韩综合精品一区二区 | 二区三区av | 久久精品亚洲一区 | 国产免费观看一区 | 亚洲在线一区二区 | 精品日韩在线 | 涩涩视频网站在线观看 | 国产乱码精品1区2区3区 | 亚洲一区在线日韩在线深爱 | 黄色成人在线 | 久久久久国产精品一区二区 | 日韩欧美高清 | 亚洲性视频网站 | 亚洲欧美精品国产一级在线 | 欧美午夜一区二区三区免费大片 | 国产精品自在线 | 日本三级网站在线 | av日韩在线播放 | 亚洲视频在线观看免费 | 亚洲免费在线观看 | 国产欧美视频一区二区 | 正在播放国产精品 |