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