Vue组件 为什么data必须是函数

Posted 2021-09-07 HUMILITY

组件数据存放

• 组件自己的数据存放在哪里呢

  • 组件对象有data，computed，methods
  • 但是在使用这个data属性必须是一个函数

  • 而且这个函数要返回一个对象，对象内部保存着数据

        <div id="app">
            <mycpn></mycpn>
        </div>
    
        <script>
            Vue.component(\'mycpn\', {
                template: \'<div>{{message}}</div>\',
                data: function() {
                    return {
                        message: \'组件内容\'
                    }
                }
            });
    
            var app = new Vue({
                el: \'#app\'
            })
        </script>
        

为什么data必须是函数

javascript对象是引用关系，所以如果return出的对象引用了外部的一个对象，那这个对象就是共享的的，任何一方修改都会同步。比如

    <div id="app">
        <mycpn></mycpn>
        <mycpn></mycpn>
        <mycpn></mycpn>
    </div>

    <script>
        var data = {
            counter: 0
        };
        Vue.component(\'mycpn\', {
            template: \'<button @click="counter++">{{counter}}    </button>\',
            data: function() {
                return data;
            }
        });

        var app = new Vue({
            el: \'#app\'
        })
    </script>
    

组件使用了三次。但是点击任意一个<button>,三个的数字都会加1，那是因为组件的data引用的是外部的对象，这肯定不是我们期望的效果，所以给组件返回一个新的data对象来独立

    <div id="app">
        <mycpn></mycpn>
        <mycpn></mycpn>
        <mycpn></mycpn>
    </div>

    <script>
        var data = {
            counter: 0
        };
        Vue.component(\'mycpn\', {
            template: \'<button @click="counter++">{{counter}}</button>\',
            data: function() {
                return {
                    counter: 0        //返回新值，不会相互影响
                }
            }

        });

        var app = new Vue({
            el: \'#app\'
        })
    </script>

使用函数返回新值，组件不会相互影响，不会引起连锁反应。