2022-07-30 面试题:Vue中的data为什么必须是一个函数而非对象

前端OnTheRun

于 2022-07-30 16:54:12 发布

阅读量207

点赞数

分类专栏： vue 面试文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/126063072

版权

面试同时被 2 个专栏收录

43 篇文章

订阅专栏

vue

41 篇文章

订阅专栏

本文通过实例讲解Vue组件中data为何必须使用函数而不是对象，当data为函数时，每个实例都能拥有独立的数据副本，避免实例间数据共享导致的意外影响。示例展示了data为函数和对象时，组件内按钮点击计数的不同行为，凸显了函数用法的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

data为什么是一个函数?

答:data定义成一个函数的好处是可以让每个实例可以维护一份被返回对象的拷贝,若是对象,则会影响到其他实例

例子

<body>
    <div id="app">
        <zujian></zujian>
        <zujian></zujian>
        <zujian></zujian>
    </div>
</body>
<script>
    var msg = {
        count: 0
    };
    Vue.component('zujian', {
        // data是一个函数,三个button的点击次数是相互独立的
        data: () => {
            return {
                count: 0
            }
        },
        // data是一个对象,三个button的点击次数是互相影响的
        // data: () => {
        //     return msg
        // },
        template: '<button @click="count++">点击了{{count}}次</button>'
    });
    new Vue({
        el: "#app",
    });
</script>