Vue3：如何避免 Vitejs 在掛載應用程序時擦除/替換所有 DOM 內容？

Question

我來自 Vue 2，我習慣使用 wordpress 標准 html 頁面並在其中使用一些 Vue 組件。 只需將容器傳遞給主 app el屬性，然后我就可以在容器上使用我想要的組件，而無需刪除或替換所有默認容器的內容。 基本上，將一個 dom 元素傳遞給el屬性，使該元素成為一個 Vue 應用程序，包括它的所有內容（即使沒有任何 Vue 組件）。

使用 Vue 3 和 createApp，似乎沒有辦法做到這一點，因為一旦我將應用程序安裝到容器（比如#app），那么所有容器的內容都會被刪除或替換為組件的模板（如果傳遞了一個組件） ）。 即使是以下不使用任何組件的內容，也會清除所有#app 原始內容：

import { createApp } from 'vue'

createApp({

}).mount('#app');

如何避免？ 如何在免費的 html 頁面上只使用一些備用組件？ SFC 使用同樣的方法怎么樣？

Answer 1

從技術上講，Vue 總是替換元素的內容（Vue 2 替換了元素本身，Vue 3 替換了它的內部內容 - 遷移指南）

如果正在安裝的應用程序/組件沒有template選項或render function，那么（並且只有在那時）Vue 會獲取 DOM 元素的原始內容（在它安裝之前）並嘗試將其編譯為渲染 function（這就是您需要編譯器的原因+ 使用 DOM 內模板時的運行時構建）

這也意味着，如果您的頁面主要由 static HTML（來自 WordPress）和 Vue 的“少量”組成，那么這個解決方案非常無效，也是petit-vue存在的原因（我建議閱讀與標准 Vue 的比較

反正。 我無法重現您的問題...

 const app = Vue.createApp({ }).mount("#app")

 <script src="https://unpkg.com/vue@3.2.9/dist/vue.global.js"></script> <div id='app'> <div> <h2>Hello from HTML!</h2> </div> </div>

那么有什么問題呢？

1. 檢查瀏覽器開發工具控制台是否有任何錯誤消息 - 如果（從 DOM 檢索的模板的）編譯步驟失敗，Vue 確實不會呈現任何內容，並且感覺就像“Vue 在掛載后擦除所有內容”
2. 謹防DOM 模板解析注意事項。 瀏覽器傾向於在 Vue 從 DOM 讀取之前“修復”無效的 HTML - 可能會導致奇怪的錯誤
3. 請務必使用包含模板編譯器的 Vue 發行版。 不這樣做也會導致錯誤並刪除所有內容