Vue組件（2） 爲何data必須是函數

組件數據存放

• 組件本身的數據存放在哪裏呢

  • 組件對象有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>

使用函數返回新值，組件不會相互影響，不會引發連鎖反應。