Vue編寫支援SSR的萬用群組件指南
https://mp.weixin.qq.com/s?__biz=MzU0OTExNzYwNg==&mid=2247484455&idx=1&sn=62adb724769dabe449e43ec68fc37778
在編寫萬用群組件時，開發人員應該考慮三個非常常見的警告︰
1.window, document, and friends - platform-specific APIs
經驗法則：不要在created或beforeCreate中調用特定於流覽器的API。 如果必須這樣做，那麼至少要執行可用性檢查：
2.Lifecycle hooks and side effects
經驗法則：不要在created或beforeCreate中使用帶副作用的代碼。
3.No data reactivity(數據隔離性)
這通常不是什麼大問題，但你需要知道。伺服器端和用戶端的值之間資料互不影響。如果你在伺服器端操作data，則根本不會在用戶端看到這些變更。
4.指令(Directives)
最簡單的方法是：不要使用Directives，使用component。我使用VueNextLevelScroll或vue-if-bot等元件做到了這一點，因為它更容易使它們普遍可用，並且它們也可以進行代碼分割！使用components抽離，你不會失去任何東西。
5.注意kebab-case
請注意以kebab-case（如：make-red而不是makeRed）傳遞你的指令。否則，他們將無法被識別！這是vue-server-renderer中的錯誤（有關詳細資訊，請看官方文檔）。
#API, No data reactivity, directives, kebab-case, 數據隔離性
https://mp.weixin.qq.com/s?__biz=MzU0OTExNzYwNg==&mid=2247484455&idx=1&sn=62adb724769dabe449e43ec68fc37778
在編寫萬用群組件時，開發人員應該考慮三個非常常見的警告︰
1.window, document, and friends - platform-specific APIs
經驗法則：不要在created或beforeCreate中調用特定於流覽器的API。 如果必須這樣做，那麼至少要執行可用性檢查：
2.Lifecycle hooks and side effects
經驗法則：不要在created或beforeCreate中使用帶副作用的代碼。
3.No data reactivity(數據隔離性)
這通常不是什麼大問題，但你需要知道。伺服器端和用戶端的值之間資料互不影響。如果你在伺服器端操作data，則根本不會在用戶端看到這些變更。
4.指令(Directives)
最簡單的方法是：不要使用Directives，使用component。我使用VueNextLevelScroll或vue-if-bot等元件做到了這一點，因為它更容易使它們普遍可用，並且它們也可以進行代碼分割！使用components抽離，你不會失去任何東西。
5.注意kebab-case
請注意以kebab-case（如：make-red而不是makeRed）傳遞你的指令。否則，他們將無法被識別！這是vue-server-renderer中的錯誤（有關詳細資訊，請看官方文檔）。
#API, No data reactivity, directives, kebab-case, 數據隔離性
留言
張貼留言