精华内容
下载资源
问答
  • vue组件中的data
    千次阅读
    2020-06-24 08:50:15

    vue2.X组件中data为什么是一个函数?曾经的困惑,今天我就好好总结一下。
    在vue实例上data定义的是一个对象:

    new Vue({
      el: '#blog-post-demo',
      data: {
        posts: [
          { id: 1, title: 'My journey with Vue' },
          { id: 2, title: 'Blogging with Vue' },
          { id: 3, title: 'Why Vue is so fun' }
        ]
      }
    })
    

    但是在vue组件中data定义的是一个函数

    // 定义一个名为 button-counter 的新组件
    Vue.component('button-counter', {
      data: function () {
        return {
          count: 0
        }
      },
      template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })
    

    解答:
    当data是一个对象时,我们知道object类型是引用类型,data是一个指针,指向对象在堆内存中存储的地址。

    如果组件中的data也是一个对象,那么在组件进行复用的时候,相当于这些组件共用的是一个data,一个组件中的data数据改变了,那么其他复用组件的数据也会跟着改变。这就降低了组件复用性和灵活性。

    那为什么把组件中的data设置为一个函数呢?
    我们知道作用域分为全局作用域、局部作用域(函数作用域)、块级作用域(es6)。
    组件中的data设置为一个函数,相当于每个组件实例都有自己的作用域,那么局部作用域中的数据改变是不会影响其他作用域的,也就是说每个组件相互独立,互不影响。这样就保证了组件的复用性和灵活性。

    万变不离其宗,掌握好js是学习框架原理的基础!

    更多相关内容
  • Vue组件中data的使用方式

    千次阅读 2019-05-31 09:38:47
    全局组件中data使用方式: js写法: Vue.component("mycom1",{ template:'<h1>这是全局组件--{{msg}}</h1>', data:function () { return { msg:'这是全局组件中data定义的数据' } } }); var...

    全局组件中的data使用方式:
    js中写法:

    Vue.component("mycom1",{
        template:'<h1>这是全局组件--{{msg}}</h1>',
        data:function () {
            return {
                msg:'这是全局组件中的data定义的数据'
            }
        }
    });
    var vm = new Vue({
        el:"#newBrand",
        data:{},
        });
    

    html中写法:

    <div id="newBrand">
    	<mycom1></mycom1>
    </div>
    
    
    

    效果:
    在这里插入图片描述
    注:为什么组件中的data一定是一个function?
    为了每个实例可以维护一份被返回对象的独立的拷贝,如果 Vue 没有这条规则,点击一个按钮就可能会整体同时更新,如:
    在这里插入图片描述

    展开全文
  • vue组件中data为什么必须是一个函数

    千次阅读 2020-03-21 18:11:57
    总结: 综上可知,如果data是一个函数的话,这样每复用一次组件,就会返回一份新的...所以说vue组件data必须是函数。这都是因为js的特性带来的,跟vue本身设计无关。 js本身的面向对象编程也是基于原型链和构造...

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    总结:
    综上可知,如果data是一个函数的话,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。

    所以说vue组件的data必须是函数。这都是因为js的特性带来的,跟vue本身设计无关。

    js本身的面向对象编程也是基于原型链和构造函数,应该会注意原型链上添加一般都是一个函数方法而不会去添加一个对象了。
    注:转载

    展开全文
  • vue组件中data为什么是一个函数

    千次阅读 2021-03-20 11:04:00
    2.vue组件中data数据都应该是相互隔离,互不影响的,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响,就需要通过data函数返回...

    一、总结

    1.vue中组件是用来复用的,为了防止data复用,将其定义为函数。

    2.vue组件中的data数据都应该是相互隔离,互不影响的,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响,就需要通过data函数返回一个对象作为组件的状态。

    3.当我们将组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,拥有自己的作用域,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。

    4.当我们组件的date单纯的写成对象形式,这些实例用的是同一个构造函数,由于JavaScript的特性所导致,所有的组件实例共用了一个data,就会造成一个变了全都会变的结果。

    二、代码分析:

    vue每次会通过组件创建出一个构造函数,每个实例都是通过这个构造函数new出来的

    假如data是一个对象,将这个对象放到这个放到原型上去

    function VueComponent(){}
    VueComponent.prototype.$options = {
        data:{name:'three'} 
    }
    let vc1 = new VueComponent();
    vc1.$options.data.name = 'six'; // 将vc1实例上的data修改为six
    let vc2 = new VueComponent(); // 在new一个新的实例vc2
    console.log(vc2.$options.data.name); six
    // 输出vc2的data的值是six,这时候发现vc2中的data也被修改了,他们data相互影响

    将data改为一个函数

    // 这样就可以保证每个组件调用data返回一个全新的对象,和外部没有关系
    function VueComponent(){}
    VueComponent.prototype.$options = {
        data: () => ({name:'three'}) 
    }
    let vc1 = new VueComponent();
    let objData = vc1.$options.data()
    objData.name = 'six'; // 调用data方法会返回一个对象,用这个对象作为它的属性
    console.log(objData)
    let vc2 = new VueComponent();
    console.log(vc2.$options.data());

    三、源码

    1.在core/global-api/extend.js中会调用mergeOptions方法

        const Sub = function VueComponent (options) {
          this._init(options)
        } // 创建一个子类
        Sub.prototype = Object.create(Super.prototype)
        Sub.prototype.constructor = Sub
        Sub.cid = cid++    
        Sub.options = mergeOptions( // 调用mergeOptions进行合并
          Super.options,
          extendOptions
        )
        Sub.extend = Super.extend
        Sub.mixin = Super.mixin
        Sub.use = Super.use

    2.mergeOptions方法(src/core/util/options.js)

    // 将两个对象合并到一个对象中
    // 包括生命周期的合并,data的合并等
    export function mergeOptions (
      parent: Object,
      child: Object,
      vm?: Component
    ): Object {
      if (process.env.NODE_ENV !== 'production') {
        checkComponents(child)
      }
     
      if (typeof child === 'function') {
        child = child.options
      }
     
      normalizeProps(child, vm)
      normalizeInject(child, vm)
      normalizeDirectives(child)
      if (!child._base) {
        // 对extend和mixins做合并
        if (child.extends) {
          parent = mergeOptions(parent, child.extends, vm)
        }
        if (child.mixins) {
          for (let i = 0, l = child.mixins.length; i < l; i++) {
            parent = mergeOptions(parent, child.mixins[i], vm)
          }
        }
      }
     
      const options = {}
      let key
      // 循环父类
      for (key in parent) {
        mergeField(key)
      }
      // 循环子类
      for (key in child) {
        if (!hasOwn(parent, key)) {
          mergeField(key)
        }
      }
      // 合并字段
      function mergeField (key) {
        const strat = strats[key] || defaultStrat
        options[key] = strat(parent[key], child[key], vm, key)
      }
      return options
    }

    3.合并data(src/core/util/options.js)

    strats.data = function (
      parentVal: any,
      childVal: any,
      vm?: Component
    ): ?Function {
      if (!vm) {
        // 合并之前看看这个子类是不是一个函数,如果不是就告诉他这个数据应该是一个函数
        // 因为每一个组件都会返回一个实例
        if (childVal && typeof childVal !== 'function') {
          process.env.NODE_ENV !== 'production' && warn(
            'The "data" option should be a function ' +
            'that returns a per-instance value in component ' +
            'definitions.',
            vm
          )
     
          return parentVal
        }
        // 如果是函数就调用mergeDataOrFn进行合并
        return mergeDataOrFn(parentVal, childVal)
      }
     
      return mergeDataOrFn(parentVal, childVal, vm)
    }

    4.源码总结:

    通过vue.extend方法创建一个子类,创建子类之后会把自己的选项和父类的选项使用mergeOptions方法做一个合并,自己的选项就包含data。在mergeOptions中会调用strats.data对子类的data进行合并,这个方法中首先会判断子类的data进行判断,要求data必须是一个函数,如果不是会报错告诉它这个data应该是一个函数定义,因为每一个组件都会返回一个实例,如果是data就会调用 mergeDataOrFn方法进行合并。然后会合并父类的extend、minin、use方法,最后extend返回的就是这个子类的方法。

    补充:

    为什么要合并?因为子组件也要有父组件的属性,extend方法是通过一个对象创建了一个构造函数,但是这个构造函数并没有父类的属性,因为它是一个新函数,和之前的Vue构造函数是没有关系的。通过extend产生了一个子函数,这个子函数需要拥有vue实例上的所以东西,它就要做一次合并。

    四、为什么new Vue这个里面的data可以放一个对象?

    因为这个类创建的实例不会被复用。它只会new一次,不用考虑复用。

     

    展开全文
  • 最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件中data属性值为什么是函数而不是对象。 首先来了解一下Vue组件的使用理念:在Vue组件使用,组件...
  • 37. Vue组件data使用

    千次阅读 2020-06-18 22:53:36
    上一篇章讲解了Vue组件的定义以及全局、私有创建的方式、相关注意事项。那么本篇章再来看看另一个注意点data。 在vm实例data是可以直接定义属性值,如下: image-20200204122714276 但是,在组件中data...
  • vue组件中data必须是一个函数的原因

    千次阅读 2018-05-17 14:19:38
    vue组件中data值不能为对象,因为对象是引用类型,组件可能会被多个实例同时引用。如果data值为对象,将导致多个实例共享一个对象,其中一个组件改变data属性值,其它实例也会受到影响。 上面解释了data不能为对象...
  • vue组件中data数据return的意义

    千次阅读 2020-04-02 12:20:53
    VUE组件中 data 里面的数据为什么要return 出来 请先看下面示例 var obj={ name:"zhangsan", age:20 } var a=obj; var b=obj; a.age=18 console.log(a,b) // {name: "zhangsan", age: 18...
  • vue组件中data为什么是函数?而不是对象
  • vue组件中data函数

    千次阅读 2021-10-04 13:51:27
    vue组件中的数据是不能保存在 vue实例中的data中的。 明确 vue组件中的data 是一个函数 data必须是函数的原因是 组件是会被复用的 。data是函数类型,就会避免发生连锁反应。因为每调用一次函数,都会在函数的栈空间...
  • 为什么Vue组件中data是一个函数原理(详细易懂)

    千次阅读 多人点赞 2020-03-29 15:43:50
    文章目录组件中data实例data是函数----原理function知识data是函数的原理案例总结举一反三 组件中data 组件是一个具有单独自身功能模块的封装,这个模块有属于自己的HTML模板,也应该有属于自己的数据data组件...
  • 为什么Vue中data一定要是一个函数?

    千次阅读 2022-05-25 08:45:00
    为什么data要是一个函数?
  • vue中data为什么必须是个函数?

    千次阅读 2021-05-30 20:40:02
    vue中data必须是函数是为了保证组件的独立性和可复用性,data是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次,就分配几个内存地址,他们的地址...
  • vue组件中props与data的结合使用

    千次阅读 2021-07-20 18:49:27
    如前所述,vue组件中,props是组件公有属性,对外;data是组件的私有数据,对内。正因为props对外,由外部赋值,因此在组件内部,是只读的,即组件内部不适宜去改变这些元素的值。当然,改也可以改,但运行时刻会有...
  • 我们在vue组件中经常遇到需要重置表单的场景,需要重置data中的对象
  • vue中data为什么是一个函数

    千次阅读 2021-04-29 20:16:35
    组件是一个可复用的Vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用多少次,组件中data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就会被复制一次,、 ...
  • 创建全局组件、创建私有组件组件的模板抽离写法、组件data
  • getElementById、getElementsByClassName获取到Vue组件后,希望调用Vue组件中方法,访问组件的数据
  • Vue组件中data选项为什么必须是函数

    千次阅读 2017-10-28 10:55:25
    构造 Vue 实例时传入的各种选项大多数都可以在组件里使用。只有一个例外:data 必须是函数。实际上,如果你这么做: Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message...
  • vue中data数据为什么定义成函数形式

    千次阅读 2022-03-31 23:51:46
    1,data组件都是vue的实例 2,组件共享data属性,当data的值是用一个引用类型的时候,改变其中的值会影响到其他的 3,组件中data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件,都会返回一份新的...
  • Vue组件基础有这样一句话:data必须是一个函数。 为什么data必须是一个函数呢? 我们来看Vue在声明式渲染给出的一个demo: <div id="app">{{ message }}</div> var app = new Vue({ ...
  • vue 组件中data 为什么必须是函数

    千次阅读 多人点赞 2018-12-26 23:44:31
    但是在组件中data必须是一个函数,因为每一个 vue 组件都是一个 vue 实例,通过 new Vue() 实例化,引用同一个对象,如果 data 直接是一个对象的话,那么一旦修改其中一个组件的数据,其他组件相同数据就会被改变...
  • Vue.js之组件data的使用

    千次阅读 2018-10-09 15:57:08
    传入Vue构造器的多数选项也可以用在Vue.extend()或Vue.component()Vue.js规定:在定义data选项时,必须使用函数 如果data选项指向某一个对象,这意味着所有的组件实例公用一个data。如下代码所示: ...
  • 最近在公司写vue项目的时候,发现一个渲染问题,父组件传给子组件的数据,当该数据在父组件发生改变的时候,子组件中的数据不会因其的改变而去改变。 原因 经上网查证得知,是因为父组件传给子组件的数据是通过...
  • VUE自定义组件data引用方式的理解

    千次阅读 2021-04-06 14:58:31
    在学习vue自定义组件时,对比定义全局vue和自定义组件时,关于data值产生疑惑: 为什么自定义组件在利用时,data变量引用方式为函数引用 Vue.component("this",{ template:'#info', methods:{ add(){this.number++} ...
  • 1、父组件获取子组件data数据和子组件方法。 <template> <!-- 父组件 --> <div class="box" style="margin:20px"> <child ref="childData"></child> </div> </...
  • 因为vue遵循单项数据流规范,所以想在组件中直接修改props是不允许的,数据从父组件传的值不可以在子组件中直接修改,只可以直接使用,如果想修改props的属性值必须**...data中的数据与props中的数据就不存在从属关系。
  • Vue 会递归的将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对):浏览器 API 创建的原生对象,原型上的属性会被忽略。大概来说,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 219,482
精华内容 87,792
关键字:

vue组件中的data