福田网站建设-信科网络接app推广接单平台
在 Vue 里，一般情况下组件里的 data 得是一个返回对象的函数，而不是单纯的对象，下面就跟你仔细唠唠为啥要这么搞。
先说说如果 data 是普通对象会咋样
假如 data 是一个普通对象，那这个对象就会被所有组件实例共享。你可以把这个对象想象成一份公共的表格，所有组件实例都能在上面填写和修改内容。这样一来，一个组件实例对表格内容的修改，会直接影响到其他组件实例看到的内容，这肯定不是我们想要的。
给你举个例子，假如你开发一个电商网站，每个商品卡片都是一个组件。要是 data 是普通对象，当你修改了一个商品卡片上的库存数量，其他商品卡片上的库存数量也跟着变了，这明显不符合实际需求。
为啥要让 data 是返回对象的函数
当 data 是一个返回对象的函数时，每个组件实例调用这个函数，都会得到一份独立的对象副本。你可以把这个函数想象成一个复印机，每个组件实例都能复印一份属于自己的表格，在自己的表格上填写和修改内容，不会影响到其他组件实例的表格。
还是拿电商网站的商品卡片举例，每个商品卡片组件实例都有自己独立的库存数量数据，修改一个商品卡片的库存数量，不会对其他商品卡片产生影响，这才符合正常的业务逻辑。
代码示例感受下区别
错误示例：data 为普通对象
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Vue Data 错误示例</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><my-component></my-component><my-component></my-component></div><script>// 定义组件Vue.component('my-component', {// 错误：data 为普通对象data: {count: 0},template: '<button @click="count++">{{ count }}</button>'});new Vue({el: '#app'});</script>
</body></html>
在这个例子里，点击任意一个按钮，两个按钮上显示的数字都会一起增加，因为它们共享同一个 data 对象。
正确示例：data 为返回对象的函数
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Vue Data 正确示例</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head><body><div id="app"><my-component></my-component><my-component></my-component></div><script>// 定义组件Vue.component('my-component', {// 正确：data 为返回对象的函数data: function () {return {count: 0};},template: '<button @click="count++">{{ count }}</button>'});new Vue({el: '#app'});</script>
</body></html>
在这个例子中，每个组件实例都有自己独立的 count 数据，点击一个按钮，只有对应的按钮上的数字会增加，不会影响到其他按钮。
所以，为了保证每个组件实例都有自己独立的数据，避免数据共享带来的问题，在 Vue 组件里 data 要写成返回对象的函数。不过要注意，根实例的 data 可以直接是一个对象，因为根实例只有一个，不存在多个实例共享数据的问题。