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

原创于 2022-07-30 16:54:12 发布 · 245 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue 同时被 2 个专栏收录

46 篇文章

订阅专栏

面试

42 篇文章

订阅专栏

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

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>