企业官网建设流程全解析

最近有个年轻同事跑来找我，说他面试时被问到“为什么组件的 data 必须是一个函数而不是对象？”他当时脱口而出“防止多个组件实例共享数据”，结果面试官接着追问：“共享数据到底会怎样？为什么对象就会共享，函数就不会？能结合 Vue 的源码说一下吗？”他一下愣住了。这个场景太典型了，因为这道题几乎每个面 Vue 的开发者都会被问到，但能答到多深，确实能区分“背题”和“理解框架”。

这篇文章不打算只给一个结论，我尽量把这件事从现象到原理、从源码到实战踩坑，完整拆给你看。不管你现在是刚接触 Vue 的新手，还是准备跳槽的求职者，又或者已经在项目里见过“点击一个组件，另一个组件状态也变了”的灵异事件，这篇都值得你花十分钟读完。

1. 先看表象：同一个组件，两种写法，两种结果

最好的切入点永远是代码。我们先不聊理论和源码，直接看两种写法在页面上的真实表现。

1.1 对象写法：改一个，全都变

假设我们写了一个简单的计数器组件：

// CounterComponent.vue export default { name: 'CounterComponent', data: { count: 0 }, template: ` <button style="margin: 4px" @click="count++"> clicked {{ count }} times </button> ` }

然后在父组件里使用它两次：

<template> <div> <CounterComponent /> <CounterComponent /> </div> </template>

打开页面后，页面上会出现两个按钮，都显示“clicked 0 times”。现在你随便点击其中一个按钮，会发现诡异的事情发生了：不只是你点的那个按钮计数加一，另一个按钮的计数也同步加一。两个按钮完全绑定了，像连体婴儿一样。

为什么？因为组件定义里的data对象，在内存里只有一份。两个组件实例引用的是同一个对象，也就是同一个count属性。你点击任意一个按钮，修改的是那个共享对象的count值，另一个按钮读取的又是同一个对象的结果，自然跟着变了。

这还不算最可怕的。更隐蔽的问题是，在很多页面上，这种 Bug 不一定第一时间暴露。因为如果你点击了第一个按钮，两个按钮都变成 1，视觉上可能觉得“这是不是本来就实现了同步联动？”只有当两个按钮需要维护不同数量时，你才会发现状态完全失控。

1.2 函数写法：各用各的

现在我们改成标准写法：

// CounterComponent.vue export default { name: 'CounterComponent', data() { return { count: 0 }; }, template: ` <button style="margin: 4px" @click="count++"> clicked {{ count }} times </button> ` }

父组件代码不变。重新刷新页面后，点击任意一个按钮，只有被点击的那个按钮计数增加，另一个按钮依旧是 0。两个组件互不干扰，关闭浏览器再打开，它们又都回归到 0。

关键区别在于，data变成了一个函数。Vue 在每次创建组件实例时，都会调用一次data函数，然后把这个函数的返回值作为这份实例的状态。每次调用都执行return { count: 0 }，这个对象字面量是全新的，地址和第一个实例完全不同。因此每个组件实例都拥有自己的count，谁也不影响谁。

1.3 一个“发酵面团”类比

我经常在团队新人培训时用这个类比：把对象写法比作多个容器共享同一团已经发好的面团。一个容器里的面团加了一把面粉，另一个容器里的面团也跟着多了，因为它们物理上是同一团。函数写法则是每个容器发自己的一团面，配方相同，但互不掺和。

这个类比虽然生活化，但它抓住了核心：函数不是关键，关键是通过每次函数调用生成了一个全新的对象副本。如果写成data: { count: 0 }，那它就只是一份固定对象，Vue 不可能在每个实例创建时帮你把它复制一份，因为 JavaScript 对象默认就是引用传递，没人替你做深拷贝。

2. 为什么对象会“串数据”：组件实例化的底层逻辑

看完了现象，我们得往底层走一步。很多人只知道“组件会被复用”，但说不清组件到底以什么形式存在，为什么data是对象就会共享。

2.1 组件的本质：一个可复用的构造函数

在 JavaScript 里，我们经常用构造函数来生成对象。Vue 组件的设计本质上就是一套“选项+实例工厂”：你写的组件选项对象，会被 Vue 内部转换成一个构造函数，或者一个创建实例的工厂。每在模板里使用一次<CounterComponent />，Vue 就会执行一次实例化操作，生成一个独立的组件实例。

那么问题就变成了：实例化时，组件的状态从哪里来？Vue 需要为每个实例准备一份数据。如果data是对象，它的值在一开始就固定了，无论之后创建多少个实例，拿到的都是同一个引用。你可以简单理解成，所有实例的data属性都指向同一个内存地址，所以必然共享。

如果data是函数，Vue 就会把它作为一个“工厂”，在每次实例化时执行这个函数，用函数的返回值给实例单独赋值。因为函数每次执行都会产生新对象，所以每个实例就拥有了独立的状态。这就是“模板复用”和“状态隔离”能共存的根本原因。

2.2 根实例为什么能使用对象

你可能在 Vue 2 的根实例代码里见过这种写法：

new Vue({ el: '#app', data: { message: 'hello' } })

注意，这里没有被 Vue 警告，因为根实例本身是允许使用对象的。原因并不复杂：整个应用里根实例只有一个，不存在“复用”的情况，所以对象共享的问题天然不存在。既然只有一个实例，数据对象即使被引用，也没有“第二个抢占者”。

但组件不一样。组件是设计来被反复使用的，一个页面里可能同时渲染几十个同类组件。如果组件允许data是对象，那么它必须保证每个组件实例都拿到独立的数据，否则就会出现第一节里的连体现象。所以 Vue 在合并选项时专门对组件做了约束，强制data是函数。

从工程角度说，根实例作为唯⼀入口，即使写了对象也没问题；但我会建议你也统一写成函数。原因不是必须，而是保持一致的风格，避免以后从根实例拆出组件时忘记改。

2.3 为什么“每次执行返回新对象”是必然选择

有人会问，那把对象深拷贝一份再给每个实例不也行吗？理论可行，但代价远超函数方案。深拷贝一个对象需要递归遍历所有嵌套属性，成本高，而且还需要考虑函数、Date、RegExp、循环引用等特殊值。相比之下，让用户提供一个“生产新对象的工厂函数”是成本最低、最不容易出错的方式。

更进一步，Vue 的响应式系统在初始化时，会遍历data中的每个属性，通过Object.defineProperty（Vue 2）或Proxy（Vue 3）把它们变成响应式。如果多个组件实例共享同一个对象，响应式转换逻辑也会碰到它不该碰到的状态：第一次实例化时可能会把共享对象的属性做一些代理或依赖收集，第二次实例化再次操作同一对象时，依赖关系变得一团糟，轻则性能下降，重则状态错乱。

所以，“data 必须是函数”不是 Vue 拍脑袋拍出来的规则，而是设计上为了保证每个组件实例拥有独立、可预测的响应式状态而做的最优选择。

3. 源码层面：Vue 是怎么强制使用函数的？

了解现象和原理后，再去看源码会非常通畅。很多 Vue 开发者一看到源码就头大，但实际上这块逻辑并没有那么复杂，我可以把它拆成人话。

3.1 Vue 2 中 data 选项的合并策略

Vue 2 在合并组件选项时，会调用mergeOptions函数，其中针对data有专门的策略。在strats.data这个函数里，Vue 做了一个判断：如果当前合并的结果不属于根实例，也就是vm参数为空，同时childVal（子选项）不是函数，就直接在控制台给出警告：

The "data" option should be a function that returns a per-instance value in component definitions.

翻译过来就是：组件定义中的 data 选项应该是一个函数，并且返回的是每个实例各自的值。

源码里大致逻辑是这样的（我做了精简）：

strats.data = function (parentVal, childVal, vm) { if (!vm) { if (childVal && typeof childVal !== 'function') { warn('The "data" option should be a function ...'); return parentVal; } return mergeDataOrFn(parentVal, childVal); } return mergeDataOrFn(parentVal, childVal, vm); };

注意!vm这个判断。这里vm指当前合并选项时是否已经存在一个根实例上下文。当你在创建子组件定义时，没有传入vm，所以走了警告分支。而根实例传了vm，就能直接处理对象。这从源码层面印证了：只有根实例能享受对象写法的豁免，组件不可以。

3.2 initData 阶段才真正调用 data 函数

合并选项只是第一步。真正干活是在实例初始化阶段，Vue 会调用initState，其中包含initData。initData里会读取vm.$options.data，然后判断：

let data = vm.$options.data; data = vm._data = typeof data === 'function' ? getData(data, vm) : data || {};

如果data是函数，就调用getData；如果已经是对象，就直接使用这个对象。getData内部其实就一行核心逻辑：

return data.call(vm, vm);

也就是把函数执行一遍，并把当前组件实例作为this传给函数。所以每次实例化都会执行一次这个函数，返回全新的对象。这是“每个实例独立状态”的真正落地之处。

有意思的是，因为data函数调用时this指向组件实例，所以你会看到很多人在data函数里这样写：

data() { return { userInfo: this.$store.state.user }; }

它可以正常访问到this.$store、this.$route、this.$props等。但这个能力是有代价的：如果你把data写成箭头函数，this就丢了，这我们后面会细说。

3.3 Vue 3 的变化与不变

Vue 3 从选项式到组合式变化很大，响应式系统也换成了Proxy，但组件data必须是函数这条规则并没有改变。在applyOptions处理data时，同样会判断函数的类型，如果不是函数就会警告。

Vue 3 中如果你用setup()或<script setup>，情况看起来不太一样，因为状态都是自己定义的ref或reactive对象。其实本质是类似的：setup函数本身也是每次组件实例化时执行，返回响应式状态，所以天然隔离。很多老手会把setup定义到组件选项外部共享对象，也会遇到同样的问题。因此无论是 Vue 2 还是 Vue 3，核心设计哲学始终是：复用组件时，状态必须由工厂函数生成。

4. 实际开发中的“坑”与进阶理解

把源码啃过的概念如果只是用来应付面试，那就太可惜了。接下来分享一些在实际项目中会遇到的问题，以及怎么把这道题答出深度。

4.1 警惕只认识警告，不认识 Bug

如果你在开发环境把组件的data写成对象，控制台会立刻出现 WARNING。很多人的第一反应是“噢，有这个警告，改成函数就好了”，这就把问题想浅了。

我见过一个项目里，有人写了对象式data，但控制台里警告没注意，线上页面刚好只有一个组件实例，所以状态看起来一直正常。后来需求变更，同一个组件在一屏里出现了两次，结果就出现了“一个输入框输入，另一个也跟着变”的诡异问题。排查了很久，才最终定位到是data写了共享对象。

所以我要强调的是：不要只把这个当成“代码规范问题”，它是一个会导致运行时逻辑错误的高危隐患。只要组件被实例化一次以上，共享状态一定会产生无法预料的副作用，只是时间早晚的问题。

4.2 data 函数里不要用箭头函数

既然data函数执行时this指向当前组件实例，那很多新手会顺手写出这样：

data: () => ({ count: 0 })

这种写法在大多数简单场景里看着“好像也能运行”，因为data函数没有使用this的任何属性，但你如果后续想在data中使用props或者路由信息，它就拿不到了。

更准确地说，箭头函数里的this是词法作用域决定的，它继承的是外层环境的this，而不是调用时绑定的实例。在 ES Module 顶层或组件定义环境中，this可能是undefined或window，于是this.someProp直接报错。别问我为什么知道，这个问题在代码评审时不知道见过多少次。

正确的做法永远是使用普通函数：

data() { return { initialCount: this.initCount || 0 }; }

这样才能在创建初始状态时，基于当前组件实例的props、$route等做初始计算。

4.3 返回外部对象一样会踩坑

前面我们说data是函数就安全，其实这句话有个前提：函数内部返回的必须是新创建的对象。如果你为了“避免重复创建”，把对象定义在模块顶层，然后返回它：

const sharedState = { count: 0 }; export default { data() { return sharedState; } };

这种写法照样会共享。因为每次调用data函数，返回的都是同一个sharedState引用。这就等于把对象写法的坑套上了一层函数的外衣，更加隐蔽。

我还见过更坏的情况：有人不是共享整个对象，而是把对象里嵌套的子对象提出来共享：

const counter = { value: 0 }; export default { data() { return { counter }; } };

页面上多个实例访问counter.value时，也是同一个内存地址。排查时如果不仔细看，很容易忽略这个外部引用。

所以正确的标杆是：data函数每次被调用时，都应该通过对象字面量等方式创建一个全新的对象，尤其要保证嵌套结构也是新建的。如果需要在多个组件之间共享状态，请使用 Vuex 或 Pinia 这样的全局状态管理，而不是靠共享data对象来实现。

4.4 面试答题的层次感

这道题如果只回答“防止共享”，面试官顶多把你看作“背过面试题”。想加分，可以按照下面的层次去答：

第一层：组件是可复用的，使用对象data会让多个实例引用同一个对象，导致状态互相污染，改一个全变。

第二层：Vue 通过强制data为函数，让每次创建实例时都执行一次函数，从而返回一个全新的对象，相当于每个实例拥有自己的状态。

第三层：从源码角度看，组件定义时 Vue 只保存了data函数，真正的对象在组件的初始化阶段才由initData/applyOptions调用产生，因此隔离是有保障的。

第四层：根实例特殊，因为全局唯一，不存在复用，所以 Vue 允许根实例直接用对象；但是组件不行。

第五层：除了状态隔离，函数data也能避免响应式系统在同一对象上重复转换，防止依赖收集混乱和性能损耗。

这五层说全了，基本就是面试官心里的“最佳答案”了。面试官接着问 Vue 3 或组合式 API 时，就把前面提到过的setup执行时机和ref/reactive的创建机制串联起来说，思路是一致的。

5. 一个 5 分钟复现实验：亲手验证引用共享

我看文章喜欢动手验证，相信你也是。下面这个 Demo 用 Vue 2 的全局构建版就行，不需要任何工程化环境。如果你电脑上装过 Node，直接创建一个.html文件用浏览器打开就好。

5.1 对象写法的 Demo

创建shared-data-demo.html，内容如下：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>data 对象写法演示</title> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> </head> <body> <div id="app"> <my-counter></my-counter> <my-counter></my-counter> </div> <script> Vue.component('my-counter', { template: '<button @click="count++">clicked {{ count }} times</button>', data: { count: 0 } }); new Vue({ el: '#app' }); </script> </body> </html>

打开页面的瞬间，控制台就会有一条关于data应该是函数的 warning。再看页面，两个按钮初始值都是 0。你点击任意一个按钮，会发现另一个按钮也跟着变化。这就是共享引用的现场。

我在本地测试时，如果你用无视警告的方式继续点击，两个按钮的count会一直保持一致。因为你改的其实是同一个对象上的同一个count属性。

5.2 函数写法的 Demo

现在只需把data那一行改成：

data() { return { count: 0 }; }

刷新页面后，控制台警告消失，两个按钮相互独立。点击任意一个，另一个不会再动。如果你刷新页面，两个按钮又都回到 0，因为每个实例的初始状态就是count: 0，刷新是重新初始化整个应用，这是符合预期的。

这个实验说明，状态独立的原因不是“Vue 做了什么魔法”，而是你提供了函数，Vue 在每次实例化时真正执行了它。

5.3 在多个组件实例里打印 data 引用是否相同

如果你还想更进一步，可以在mounted里把每个实例的_data打印出来对比。在对象写法 Demo 里增加：

mounted() { if (!window.__dataList) { window.__dataList = []; } window.__dataList.push(this._data); console.log('两个实例的data是否相同：', window.__dataList.length === 2 && window.__dataList[0] === window.__dataList[1]); }

第一次点击任意按钮后，两个实例都已挂载，控制台会输出true。改成函数写法后，输出false。用这种方式查看，比单纯看按钮跳数更直接，因为===告诉我们两个_data是否指向同一个对象。

这个实验做完，你对 JavaScript 引用传递和 Vue 组件实例化的理解会深入很多。建议你亲自跑一遍，比看十篇文章都有效。

5.4 从实验看 Vue 的设计取舍

做这个实验时我最大的体会是：Vue 把data设计成函数，并不是为了增加学习成本，而是在“状态隔离”和“易用性”之间找到了最平衡的方案。如果你现在负责维护一个大型前端项目，遇到状态互相串扰的问题，可以先放下断点调试，第一时间检查组件里是否有共享的data对象。我踩过几次坑之后，已经形成条件反射了：只要看到“改一个组件整个页面都变”的报告，先去搜data: {和return sharedObject这种写法。

在实际项目中，我更倾向于把组件的data函数看作“状态工厂”，心里始终清楚：每次渲染新实例，代码里的return {}都是一个新的起点。正因为有了这条规则，组件才能在大型项目中被安全地反复使用，而不至于因为状态共享引发连锁故障。