zoukankan      html  css  js  c++  java
  • Vue 组件 data为什么是函数

    在创建或注册模板的时候,传入一个data属性作为用来绑定的数据。但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它。
    Vue.component('my-component', {
      template: '<div>hello Vue</div>',
      data() {
        return {} // 返回一个唯一的对象,不要和其他组件共用一个对象进行返回!!!
      },
    })

    你在前面看到,在new Vue()的时候,是可以给data直接赋值为一个对象的。这是怎么回事,为什么到了组件这里就不行了。

    实际上,它首先需要创建一个组件构造器,然后注册组件。注册组件的本质其实就是建立一个组件构造器的引用。使用组件才是真正创建一个组件实例。所以,注册组件其实并不产生新的组件类,但会产生一个可以用来实例化的新方式。理解这点之后,再理解js的原型链:

    var MyComponent = function() {}
    MyComponent.prototype.data = {
      a: 1,
      b: 2,
    }
    // 上面是一个虚拟的组件构造器,真实的组件构造器方法很多
    var componentA = new MyComponent()
    var componentB = new MyComponent()
    // 上面实例化出来两个组件实例,也就是通过<my-component>调用,创建的两个实例
    componentA.data.a === componentB.data.a // true
    componentA.data.b = 5
    componentB.data.b // 5

    可以看到上面代码中最后三句,这就比较坑爹了,如果两个实例同时引用一个对象,那么当你修改其中一个属性的时候,另外一个实例也会跟着改。这怎么可以,两个实例应该有自己各自的域才对。所以,需要通过下面方法来进行处理:

    var MyComponent = function() {
      this.data = this.data()
    }
    MyComponent.prototype.data = function() {
      return {
        a: 1,
        b: 2,
      }
    }

    这样每一个实例的data属性都是独立的,不会相互影响了。所以,你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的,跟vue本身设计无关。

  • 相关阅读:
    kali 无线网络渗透测试
    kali 漏洞扫描
    Python复杂多重排序
    《编写高质量代码:改善Python程序的91个建议》读后感
    Python用format格式化字符串
    CDH安装Hadoop
    Python设计模式——状体模式
    HBase的安装与使用
    Python设计模式——观察者模式
    Python设计模式——建造者模式
  • 原文地址:https://www.cnblogs.com/lhl66/p/8698549.html
Copyright © 2011-2022 走看看