当前位置：首页 > news >正文

vue的data为什么是object

news 来源：原创 2025/5/21 11:05:36

在 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>