緊接上文，接下來我們要處理布局問題，利用成熟工具最容易實現的布局是 grid 布局，我們將采用此種方式，配合 vue-grid-layout 來完成，首先我們來看看效果：

基本功能實現的差不多了，我們需要改變思維方式，即：

之前是自底向上，從功能角度解決一些復雜的點，現在需要自頂向下解決問題

首先我們需要一個 EJSHandler 組件 和一個 EJSHandlerService 類，這個類我們將依賴注入，其下的所有組件都將可以訪問到他們的數據：

加入了一些測試數據

然后，我們創建一個 Layout 組件和相關服務，使用 vue-grid-layout:

相關服務為：

用一個新的 WidgetService， 繼承自 Template service （只有一層，不用太過擔心）:

界面很美好，功能基本都完成

但是有個很恐怖的一點，響應式保持失敗了，為什么呢？

一旦點擊按鈕更新 ejs 的組件，會發現報錯，拿不到value

記住這個錯誤：

Uncaught (in promise) TypeError: Cannot create property 'value' on string/number/data

是的，這就是Vue新版本的重難點 ——

響應式保持

模板中一旦寫入了 ref，自然會被 Vue 拆包，一般情況下這個不會影響太大，但是若是第三方庫在子組件中進行了模板映射，出現了拆包動作，問題就很難解決了：

我們將一個包含ref的復雜結構傳入給了 vue-grid-layout，并不知道他會不會改我們的值，Vue3 目前正式版都還沒有發售，第三方庫肯定沒有響應式保持的意識，因此，將 WidgetService 伙同 layout 數據一股腦傳進去是絕對會失敗的，即便我這么處理也沒有用：

這里我并沒有強制更新所有子項，然而還是失敗了

html 還是字符串，不是 ref

響應式保持的 bug，修改起來會非常消耗時間，我在優化的同時，也總結了一套解決響應時保持問題的規則，可以與大家共享

將在下一章開個特別篇討論~

總結

以上是生活随笔為你收集整理的vue使用js-cookie写入获取不到_Vue 面向对象 - 实战 - 内容管理系统（五）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。