Vue 中el和data的两种写法

el的写法

在 Vue 中，el 是用于指定 Vue 实例挂载到哪一个 DOM 元素上的配置项。根据使用方式的不同，el 有两种典型写法，分别用于不同的场景（Vue 2 和 Vue 3）。

✅ 第一种：在实例创建时通过 el 配置项指定

这种写法是 Vue 2 中最常见的方式。

// Vue 2 写法
new Vue({el: '#app', // 指定挂载点data: {message: 'Hello Vue!'}
})<div id="app">{{ message }}
</div>

这种方式在创建 Vue 实例时立即挂载。

✅ 第二种：使用 $mount() 手动挂载

适合在某些条件满足后再进行挂载，或用于更复杂的初始化逻辑。

// Vue 2
const vm = new Vue({data: {message: 'Hello Vue!'}
})vm.$mount('#app')

这种方式将挂载与实例创建分离，更灵活，适用于：

• SSR（服务端渲染）
• 延迟挂载
• 动态选择挂载点

🧠 补充：Vue 3 中不再使用 el，而是使用 createApp().mount()

// Vue 3 推荐写法
import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

这种方式本质上等价于 Vue 2 中 el + new Vue() 的组合，只是写法更模块化，更适合现代项目结构。

总结：

写法	用于 Vue 版本	说明
el: ‘#app’	Vue 2	简单场景下的快捷挂载
$mount(‘#app’)	Vue 2	手动控制挂载时机
app.mount(‘#app’)	Vue 3	Vue 3 的标准挂载方式

实例

🌱 Vue 2 示例

✅ 方式一：使用 el 配置项

<!-- index.html -->
<div id="app"><p>{{ message }}</p>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>new Vue({el: '#app',data: {message: '使用 el 挂载'}})

✅ 方式二：使用 $mount() 手动挂载

<!-- index.html -->
<div id="app"><p>{{ message }}</p>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>const app = new Vue({data: {message: '使用 $mount 手动挂载'}})// 某些逻辑后再挂载setTimeout(() => {app.$mount('#app')}, 1000)
</script>

🌿 Vue 3 示例

✅ 推荐方式：createApp().mount()

<!-- index.html -->
<div id="app"></div><script type="module">import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'const App = {setup() {const message = ref('Vue 3 挂载')return { message }},template: `<p>{{ message }}</p>`}// 方式一：立即挂载createApp(App).mount('#app')// 方式二：延迟挂载（相当于 Vue 2 的 $mount）// const app = createApp(App)// setTimeout(() => {//   app.mount('#app')// }, 1000)
</script>

data两种写法

在 Vue 中，data 有两种写法，取决于你是使用 Vue 2 的 Options API，还是使用 Vue 3 的 Composition API。就算只考虑 Vue 2，本身也有“对象”和“函数”两种形式，我们来分别讲清楚。

✅ 在 Vue 2 的 Options API 中

🔸 写法一：data 是一个函数（推荐写法，特别是组件）

export default {data() {return {message: 'Hello Vue'}}
}

📌 推荐写成函数，尤其在组件中是必须的。因为多个组件实例共享一个 data 对象会导致数据污染，函数写法能确保每个实例都有独立的数据副本。

🔸 写法二：data 是一个对象（仅限于 new Vue 根实例）

new Vue({data: {message: '根实例可以用对象'}
})

✅ 在 Vue 3 的 Composition API 中

Vue 3 推荐使用

<script setup>
import { ref } from 'vue'const message = ref('Hello Vue 3')
</script><template><p>{{ message }}</p>
</template>

✅ 总结对比

使用场景	写法	是否推荐	说明
Vue 2 根实例	data: {}	✅ 可用	仅限于 new Vue(…)
Vue 2 组件	data() { return {} }	✅ 推荐	避免组件之间共享同一数据对象
Vue 3	使用 ref() / reactive()	✅ 推荐	完全替代 data