文章目录
前言
在使用 Vue.js 进行开发时，正确理解并掌握 el 和 data 的配置方式对构建灵活、可维护的应用至关重要。本文将围绕这两个核心选项的两种常见写法进行系统性总结，并强调一个关键的编程原则。
一、el 的两种写法
el 用于指定 Vue 实例所要控制的 DOM 元素（即挂载点）。它有两种使用方式：
1. 在创建实例时直接配置
js
new Vue({
el: '#root',
data: {
name: '上高山'
}
});这是最常见、最直观的方式，在实例化时就完成挂载。
2. 先创建实例，再手动挂载
js
const vm = new Vue({
data: {
name: '上高山'
}
});
// 稍后通过 $mount 方法挂载
vm.$mount('#root');
这种方式提供了更大的灵活性，例如可以延迟挂载、条件挂载，或在异步操作完成后才将 Vue 实例绑定到 DOM。
注意 ：
$mount()是 Vue 提供的用于手动挂载实例的方法，其参数为选择器字符串（如'#root'）或 DOM 元素。
二、data 的两种写法
data 用于定义 Vue 实例的响应式数据。根据使用场景不同，也有两种形式：
1. 对象式（适用于根实例）
js
data: {
name: '上高山'
}在创建根 Vue 实例（即非组件）时，可以直接使用对象作为 data。
2. 函数式（推荐，尤其在组件中必须使用）
js
data() {
return {
name: '上高山'
};
}
// 或
data: function() {
return {
name: '上高山'
};
}函数式写法确保每个组件实例拥有独立的数据副本，避免多个实例间数据相互污染。
重要提示 ：
当你将来开发 Vue 组件（Component）时，
data必须是一个返回对象的函数。如果使用对象形式，Vue 会抛出警告甚至报错，因为对象是引用类型，多个组件实例会共享同一份数据，破坏组件的独立性。
三、关键原则：不要在 Vue 管理的函数中使用箭头函数
Vue 内部大量依赖 this 指向当前 Vue 实例。而箭头函数没有自己的 this，它会继承外层作用域的 this，从而导致 this 不再指向 Vue 实例。
❌ 错误示例：
js
data: () => {
console.log(this); // this 不是 Vue 实例！可能是 window 或 undefined
return { name: '上高山' };
}✅ 正确做法：
js
data() {
console.log(this); // this 是当前 Vue 实例
return { name: '上高山' };
}这一原则不仅适用于 data，也适用于 methods、computed、生命周期钩子等所有由 Vue 管理的函数。
四、完整代码
css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>el与data的两种写法</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
data与el的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值。
2.data有2种写法
(1).对象式
(2).函数式
如何选择：目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3.一个重要的原则：
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
-->
<!-- 准备好一个容器-->
<div id="root">
<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
// 关闭生产环境提示
Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示。
// el的两种写法
// const v = new Vue({
// //el:'#root', // 第一种写法
// data:{
// name:'上高山'
// }
// })
// console.log(v)
// //v.$mount('#root') // 第二种写法
// setTimeout(()=>{
// v.$mount('#root')
// },3000);
// data的两种写法
new Vue({
el:'#root',
// data的第一种写法：对象式
// data:{
// name:'上高山'
// }
// data的第二种写法：函数式
data:function(){
console.log('@@@', this) // 此处的this是vue实例对象
return{
name:'上高山'
}
}
})
</script>
</body>
</html>五、总结
| 配置项 | 写法一 | 写法二 | 使用建议 |
|---|---|---|---|
el |
实例化时直接指定 el: '#root' |
先创建实例，再调用 vm.$mount('#root') |
根据是否需要延迟/动态挂载选择 |
data |
对象 { name: '...' } |
函数 () => ({ name: '...' }) |
始终优先使用函数式，为组件开发做准备 |
最佳实践 ：即使当前只是编写根实例，也建议统一使用
data()函数写法，并避免在 Vue 管理的函数中使用箭头函数。这不仅能避免未来迁移至组件架构时的重构成本，也能养成良好的编码习惯。
通过掌握这些基础但关键的细节，你将能更稳健地使用 Vue 构建应用，为后续学习组件化开发打下坚实基础。