2022-07-30 面试题:Vue中的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: ''
    });
    new Vue({
        el: "#app",
    });
script>
结果

data是一个函数时:
在这里插入图片描述
data是一个对象时:
在这里插入图片描述

你可能感兴趣的:(vue,面试,vue.js,前端,javascript)