乐趣区

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

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

退出移动版