data 与 el 两种写法

el 两种写法

在创建实例时 el 配置项

1. new Vue 时候配置 el 属性。

提示

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

使用$mount()手动挂载

2. 先创建 Vue 实例，随后再通过 vm.$mount('#app')指定 el 的值。

提示

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

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

补充

vue 3 中不再使用 el，而是使用 createApp().mount()

// Vue 3 推荐写法
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app.mount("#app");

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

总结

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

data 的两种写法

注意

data 用于数据的动态渲染，在 data 里面的数据只要改变了，页面上绑定了该数据的内容也就改变。

在组件开发的时候只能用函数式，否则会报错！

data 是一个对象 (仅限于 new Vue 根实例)

new Vue({
  data: {
    name: "张三",
    age: 18,
  },
});

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

export default {
  data() {
    return {
      name: "张三",
      age: 18,
    };
  },
};

提示

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

注意

这里的 data 不能使用箭头函数。因为箭头函数没有自己的 this，所以它会向上找，所以就变成了 window，而不是 Vue 实例对象。

因此要记住一个重要原则：由 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数，this 就不再是 Vue 实例了。

vue3 中推荐使用

<script setup>
import { ref } from "vue";

const message = ref("Hello Vue 3");
</script>

<template>
  <p>{{ message }}</p>
</template>

总结对比

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