关于javascript: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>

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