从vue3开始，应用根挂载元素不再被替换，而是挂载点的innerHTML。这使得挂载body元素成为可能（就像很多人之前在vue2上尝试过的那样）。但是我应该还是不应该把body作为根元素挂载呢？有什么好的和不好的想法吗？我找不到问题的答案，我不是一个前端开发人员有任何经验。但现在我使用vue3，我想知道，如果它给我在未来的任何麻烦这样做。
body
5gfr0r5j1#
Vue在发生更改时实时更新DOM。这意味着它删除了已经存在的HTML元素。下面是一个Vue3应用程序。注意，当应用程序运行时，<div class="random"></div>不再位于DOM中。
<div class="random"></div>
let app = { data() { return { message: 'Vue3!' } }, template: ` <h1>{{ message }}</h1> <p>Vue3 works on the body</p> ` } // Mounting the app to the body element directly. Vue.createApp(app).mount('body')
* { margin: 0; padding: 0; } body { padding: 5px; color: #efefef; background: #440022; } .random { padding: 5px; background: #006600; width: 200px; height: 30px; }
<html> <body id="app"> <div class="random">What happens to existing HTML?</div> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.min.js"></script> </body> </html>
1条答案
按热度按时间5gfr0r5j1#
Vue在发生更改时实时更新DOM。这意味着它删除了已经存在的HTML元素。
下面是一个Vue3应用程序。注意，当应用程序运行时，
<div class="random"></div>不再位于DOM中。