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

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>

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

阅读 163

standing on the shoulders of giant

6 声望
2 粉丝
0 条评论
你知道吗?

standing on the shoulders of giant

6 声望
2 粉丝
宣传栏