作為vue開發人員，你可能聽說過伺服器端渲染（ssr）。 即使你沒有使用像nuxt.js或ssr-plugin這樣的框架，你也要知道如何編寫在伺服器端和客戶端都支援的通用元件。
如果你想找到基於ssr的方法或與人共享你的元件，這些知識肯定會讓你更輕鬆！如果作為乙個庫/外掛程式作者，我認為這些知識是必須掌握的。
猜猜看，它甚至都不難！
在編寫通用元件時，開發人員應該考慮三個非常常見的警告。
1.window, document, and friends - platform-specific apis
在伺服器端處理元件時，不會發生動態更新。 這就是為什麼在伺服器上只執行兩個生命週期鉤子：beforecreate和created。 這也意味著，這兩個鉤子將被呼叫兩次， 一次在伺服器上，一次在客戶端。但是在伺服器端，沒有window，document，也沒有其他特定於瀏覽器的api，如fetch。如果你試圖在這兩個鉤子中呼叫它們，伺服器上會丟擲乙個錯誤，元件就不能在伺服器端渲染了！
這只是伺服器端環境下「普通」元件或第三方庫的最常見問題。
經驗法則：不要在created或beforecreate中呼叫特定於瀏覽器的api。 如果必須這樣做，那麼至少要執行可用性檢查：
export default
}}
2.lifecycle hooks and side effects
說到生命週期鉤子！你應該考慮另一件事：***。函式或表示式在修改本地環境之外的某些狀態時具有***。比如api呼叫，i/o操作，設定計時器，新增偵聽器等。
為了避免記憶體洩漏，你不希望在建立和beforecreate掛鉤中產生***，因為當這些鉤子也從伺服器端呼叫時，你無法關閉那裡的連線。相反，這些物件將永遠存在並加起來，導致記憶體洩漏！
經驗法則：不要在created或beforecreate中使用帶***的**。
3.no data reactivity(資料隔離性)
這通常不是什麼大問題，但你需要知道。伺服器端和客戶端的值之間資料互不影響。如果你在伺服器端操作data，則根本不會在客戶端看到這些變更。
自定義vue指令經常用於操縱dom（例如，在滾動時顯示元素或使元素固定到特定位置）。我們知道這在伺服器端不起作用。那有什麼解決辦法呢？
嗯，最簡單的方法是：不要使用directives，使用component。我使用vuenextlevelscroll或vue-if-bot等元件做到了這一點，因為它更容易使它們普遍可用，並且它們也可以進行**分割！使用components抽離，你不會失去任何東西。
如果你確實想使用指令，則可以在伺服器端新增相同效果的乙個指令。在nuxt中，可以通過在nuxt.config.js中的this.options.render.bundlerenderer物件中設定指令物件來實現。乙個好的（但很複雜的）例子是官方的v-model ssr指令。
注意：請注意以kebab-case（如：make-red而不是makered）傳遞你的指令。否則，他們將無法被識別！這是vue-server-renderer中的錯誤（有關詳細資訊，請看官方文件）。
使用特定平台的api時要特別小心，尤其是window和document。
請記住，created和beforecreate是在伺服器端和客戶端都會執行的。確保寫的時候沒有***，沒有window，伺服器端資料變更不會表現在客服端。使用指令並不總是最好的抽離方法。但是如果你確實使用它們，請提供伺服器端指令
如果你想進一步閱讀，我建議你閱讀官方的vue-ssr-docs！
通用Servlet的編寫
通用servlet的編寫 資料增刪改查 需要用5個servlet 通過servlet 目的 減少servlet數量 原理 從客戶端向服務端發起請求,每次都要傳遞額外的鍵值對的資料method 服務端獲取到method對應的內容之後,通過判斷不同的內容呼叫不同的功能 從客戶端向服務端發起請求,呼叫功能...
編寫通用的Makefile
乙個應用程式的形成是少不了一下幾個步驟的。1.預處理 檢查語法錯誤 包含標頭檔案 展開 if define等巨集定義 2.編譯 把.c檔案轉換為彙編檔案.s 3.彙編 把.s彙編轉換為機器碼.o 4.鏈結 和庫檔案等組合在一起 只有經過了上面幾個步驟才能形成乙個可執行的應用程式 用gcc o tes...
譯 怎樣編寫移動優先的CSS
原文 how to write mobile first css 譯者 huansky 構建響應式 是今天前端開發人員必備的技能。當我們談論響應式 時，移動優先這個詞立刻就會浮現。我們知道從移動優先的角度設計的重要性。不幸的是，關於移動優先的配置方法很少提及。今天，我想和大家分享一下移動優先的樣式方...