已挂载的应用程序不会替换元素 重大变更
概述
在 Vue 2.x 中，当挂载具有 template 的应用程序时，渲染的内容会替换我们挂载到的元素。在 Vue 3.x 中，渲染的应用程序将作为该元素的子元素追加，替换元素的 innerHTML。
2.x 语法
在 Vue 2.x 中，我们将 HTML 元素选择器传递给 new Vue() 或 $mount
js
new Vue({
el: '#app',
data() {
return {
message: 'Hello Vue!'
}
},
template: `
<div id="rendered">{{ message }}</div>
`
})
// or
const app = new Vue({
data() {
return {
message: 'Hello Vue!'
}
},
template: `
<div id="rendered">{{ message }}</div>
`
})
app.$mount('#app')当我们将此应用程序挂载到具有传递选择器的 div 的页面时（在本例中，它是 id="app"）
html
<body>
<div id="app">
Some app content
</div>
</body>在渲染结果中，提到的 div 将被渲染的应用程序内容替换
html
<body>
<div id="rendered">Hello Vue!</div>
</body>3.x 语法
在 Vue 3.x 中，当我们挂载应用程序时，其渲染的内容将替换我们传递给 mount 的元素的 innerHTML
js
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
},
template: `
<div id="rendered">{{ message }}</div>
`
})
app.mount('#app')当此应用程序挂载到具有 id="app" 的 div 的页面时，这将导致
html
<body>
<div id="app" data-v-app="">
<div id="rendered">Hello Vue!</div>
</div>
</body>