Vue.js 是一款現代化的 JavaScript 框架，已經成為前端開發的主流之一。Vue.js 具有易學、易用、輕量、靈活、高效和可擴展等特點。
在 Vue.js 開發中，我們通常使用mount()方法將頁面組件掛載到 DOM 上。然而，Vue.js 并不支持將組件直接掛載到 `<body>` 標簽上，即使是使用 `mount()` 方法也會出現失敗的情況。
這是因為 Vue.js 的設計哲學之一就是 “組件化”，Vue.js 把頁面視為一個巨大的容器，將每個邏輯單元作為一個組件進行開發和封裝。我們通常通過 `<app>` 或其他的自定義容器元素來包裹所有的組件，而不是直接將組件掛載到 `<body>` 標簽上。
new Vue({
el: '#app', // 將組件掛載到 #app 容器中
render: h =>h(App)
}).$mount('#app')如果我們強制將組件掛載到 `<body>` 標簽上，Vue.js 將會報錯并提示以下信息：
[Vue warn]: Do not mount Vue toor- mount to normal elements instead.這意味著 Vue.js 官方不推薦我們將組件掛載到 `<body>` 標簽上，因為這樣做會對頁面結構造成不必要的破壞，并可能導致其他問題。
為了避免將組件掛載到 `<body>` 標簽上，我們應該在 HTML 代碼中加入自定義容器元素，如 `<div id="app"></div>`，然后通過 `el` 屬性告訴 Vue.js 將組件掛載到這個容器中。
<!DOCTYPE html>
<html>
<head>
<title>Vue cannot mount to <body></title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./app.js"></script>
</body>
</html>new Vue({
el: '#app', // 將組件掛載到 #app 容器中
render: h =>h(App)
}).$mount('#app')通過上述方式，我們可以避免將 Vue.js 組件掛載到 `<body>` 標簽上帶來的問題，同時也符合 Vue.js 的組件化開發理念，使得我們的代碼更加規范和易于維護。
上一篇react相對vue優勢
下一篇react和vue性能