vue 熱更新無反應 熱更新之宇宙級別的簡單暴力

2021-10-18 11:07:45 字數 1642 閱讀 2914

熱更新……大家應該都對 webpack 的熱更新比較熟悉,它主要做的事情就是,檔案修改了,就重新整理檢視

websocket

ws 是熱更新最常用的通訊形式,主要是 server 端檔案更改了,就往 client 發個訊息,這個訊息一般包含 檔案路徑和時間戳

sork.send()
客戶端收到訊息就可以進行更新了,不同檔案更新方式不同,有的可以平滑 rerender,有的則只能 reload

css

css 的熱更新最容易做,直接操作 dom 即可

let links = document.queryselectorall('link')

for (let i = 0; i < links.length; i++)

}

上面這段**的意思是,查詢 href(路徑)匹配的 link 標籤,然後更換 href

component

對於 fre 元件的更新,也是可以直接 rerender 的,這裡的思路是雙重 import(),利用了 import 的快取

import(path).then((mods) => ?t=$`).then(() => 

schedulework(c)

})} else }})

第一次 import,拿到舊的元件資訊,快取到閉包裡面,然後第二次 import 加時間戳,請求最新的元件,得到最新的 vdom,然後合併,交給 fre 的排程器即可

不得不說我真是個人才,這恐怕是全宇宙最簡單的元件熱更新方式啦

js & html

不帶引數的 js 函式可以 rerender,仍然是使用 import

帶引數的 js 和 html 都只能 reload,暫時沒有找到 rerender 的思路。

這裡主要說一下,無法 rerender 的原因,按照上面元件的思路,無論如何都是需要快取一些資訊的,對於 js 的 function 來說,這個資訊就是引數

如果有乙個功能,可以拿到 function 舊的引數並快取起來,就可以實現 js 的 rerender 了

當然還有乙個原因是,全程不涉及編譯階段,vue

大家有好的思路請一定要告訴我呀!阿里嘎多!

總結

宇宙級別的熱更新,超級簡單粗暴~

然後**組織方式的問題,因為 fre 和 vue 不一樣,fre 的**組織十分靈活,可以乙個檔案寫十個元件,如果這個檔案修改了,無法知道是哪個元件修改的,會暴力的 rerender 所有元件

同時,如果,乙個檔案,元件和 function 都有,那麼最終就會直接 reload 了,得不償失

vue 的好處是,它是寫死的,乙個單檔案就是乙個元件,可以放心的 rerender

我不想做這方面的約束,需要開發者自己按照實現原理自己組織**了,哈哈

再說,開發環境慢點就慢點,再賤!

vue之熱更新問題

一 熱更新失敗 1.1 熱更新成功,瀏覽器未響應 1.1.1 問題說明與分析 問題說明 修改後,命令列進行了編譯 compiling.但是瀏覽器沒有更新頁面。問題分析 修改 後,進行了編譯,說明熱更新是沒有問題的,可能是更新瀏覽器的問題,或者說webpack dev server 沒有真正地通知到瀏...

vue熱更新無法關閉 vue 無法熱替換 熱更新

雖然我並不是用對方的方法解決的。熱替換 熱更新原理 引用1 講解一下熱替換的原理 熱替換是在執行npm run dev後,會啟動乙個本地伺服器 webpack dev server 這個伺服器會觀察源 編譯出來的檔案。一旦修改了源 就會立刻編譯源 然後觀察新編譯後的檔案,接下來替換。我的解決辦法 特...

react native之熱更新

native 發生了變動 資源或者是js發生變動 好的,以上都是理論原理內容,由於專案期只有2個人在做rn前端方面的開發,所以沒有足夠的時間去開發公司內部的熱更新。所以使用了第三方的元件react native pushy 註冊乙個pushy賬號 pushy 配置bundle url ios 在工程...