精华内容
下载资源
问答
  • 由于每个组件都new Vue的实例,若data为对象,那么当改变其中一个组间数据时其他组件也会发生改变,为函数就不一样,有独立作用域,组件之间互不干扰

    由于每个组件都是new Vue的实例,若data为对象,那么当改变其中一个组间数据时其他组件也会发生改变,为函数就不一样,有独立的作用域,组件之间互不干扰

    展开全文
  • 对象引用类型,当同一个组件被多次引用,它们的data都指向同一个内存地址,换句话说,所有组件共享一组data 如何不共享数据 将data设置一个函数,该函数会返回一个初始数据对象,用function return 其实就相当...

    如果是对象会导致

    • 对象是引用类型,当同一个组件被多次引用,它们的data都指向同一个内存地址,换句话说,所有组件共享一组data

    如何不共享数据

    • 将data设置为一个函数,该函数会返回一个初始数据对象,用function return 其实就相当于申明了新的变量,相互独立
      data () {
            return {
                items: ['a', 'b', 'c']
            };
       },

     

    展开全文
  • 请看官网 data 必须一个函数 提取重要信息: 一个组件 data 选项必须一个函数,因此每个实例可以维护一份被返回对象独立拷贝 我为什么要水一篇文章呢?...因为我忘了data为函数了 就酱! ...

    请看官网
    data 必须是一个函数
    提取重要信息:

    一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝

    我为什么要水一篇文章呢??
    因为我忘了data为啥是个函数了
    就酱!

    展开全文
  • Vue组件里面data必须函数 **首页我们先了解一个原形和原型链,每个js对象和js方法都有一个原形,js对象的是隐式原形 proto,而方法中的是显示原形prototype,下面举个例子: export default { name:'component',...

    Vue组件里面data必须是个函数

    **首页我们先了解一个原形和原型链,每个js对象和js方法都有一个原形,js对象的是隐式原形 proto,而方法中的是显示原形prototype,下面举个例子:

    export default {
      name:'component',
      data: {
      	a: 1,
      	b: 2
      },
      methods:{
      }
    }
    // 其实底层是
    component._proto_.data={
      a:1,
      b:2
    }
    //而var obj = {}底层是var obj = new Object()
    //所以component._proto_._proto_,第一个是继承data,第二个继承Object,data不只是有data属性还包含Object属性
    

    **因为咱们封装的组件是可复用的,如果一个地方用到这个组件,其他地方也用这个组件,那样大家的继承都是一样的,只要一个地方的组件属性修改了,其他地方也会被修改,这个肯定不是我们想要的,也是很恐怖的,那用函数之后会是什么样的那,看下面一个例子:

    export default {
      name:'component',
      data: function () {
      	return {
      		a: 1,
      		b: 2
      	}
      },
      methods:{
      }
    }
    //其实底层是这样的
    var component=function(){
      this.data=this.data();//每次调用这个函数生成新的js对象
    }
    component.prototype.data=function(){
      return {
        a:1,
        b:2,
      }
    }
    

    **这个才是我们想要的效果,所以组件的data必须要用函数

    展开全文
  • 本文来自我小伙伴小帅,从JS基础出发一起学习JS,全网首发在看vue的时候,看到data时就会有一个疑问,为什么要用return呢?经过查看vue相关文档,发现数据如果不是return出去话会造成数据污染,此时数据处于...
  • 组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有...
  • vue组件的data为什么要是一个函数 一个组件的 data 选项必须一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝: data: function () { return { count: 0 } } 我自己的理解: JS里面的原型链和原型...
  • 在创建或注册模板时候,传入一个data属性用来绑定数据,但是在组件中,data必须一个函数,而不能直接把对象赋值给它。 export default { name:'app', data(){ return { } }, methods:{ }}上面组件,一个...
  • 详细了解可以去vue 的官方文档去看, 网址: ...简单来说, 如果不写成函数, data中的数据全局可见的, 就像官网里的例子所示, 你点击最左边的按钮, 理想中只有这个按钮的数据增加了, 但是所有的按钮显示都增加了 ...
  • 子组件中 data 属性值会相互影响,如果组件中 data 选项一个函数, 那么每个实例可以维护一份被返回对象独立拷贝, 组件实例之间 data 属性值不会互相影响;而 new Vue 实例, 不会被复用,因此不...
  • 为什么组件中 data 必须一个函数,然后 return 一个对象,而 new Vue 实例data 可以直接一个对象? // data data() { return { message: "子组件", childName:this.name } } // new Vue new Vue({ ...
  • 组件不可以访问Vue实例的数据的,如下 那么我们就可以得出一个结论,vue组件应该有自己保存数据的的...那么为什么组件里的data必须函数 先看一个例子 <div id="app"> <cmp></cmp> <c...
  • 理解这个问题,得先要能理解js中堆空间和栈空间使用规则。  栈空间存放基本数据类型(undefined...改变a3,b值却不变。因为他们引用地址不变。这传值。  堆空间存放引用数据类型(Object、Arr...
  • //为什么data函数里面要return一个对象 <script> export default { data() { return { // 返回一个唯一对象,不要和其他组件共用一个对象进行返回 menu: MENU.data, poi: POILIST.data ...
  • 最近在学习Vue中在图灵社区买了一本电子书...其中我第一次看到的Vue实例中的data属性时,很好奇为什么是用function return 一个对象,而在之前某些视频中的写法又是直接写的对象,然后一查,又牵扯到JS原型链等一些
  • 构造 Vue 实例时传入各种选项大多数都可以在组件使用。只有一个例外:data 必须是函数。实际上,如果你这么做: Vue.component('my-component', { template: '<span>{{ message }}</span>', data: { message...
  • 而引用类型存储的指向值的指针,这样做了为了节省内存,引用类型的赋值变量指针的赋值,不是真的拷贝,他们之间的值会相互干扰的,而在开发vue项目中我们有多组件,如果组件的data是对象,那么,当我们修改...
  • 背景:vue实例中的data是一个对象,为什么组件中的data是一个函数 下面我自己的理解,如有不妥,请留言: vue相当于银行,比如银行有100块钱,那么data就有一个数字100, 我们每个人的银行卡相当于组件,里面也...
  • 如果不用函数,用的对象形式,那么每个组件的data内存在同一个地址当中,如果其中一个数据改变了其他的也会跟着改变。 只有在函数作用域中,每个data里面的数据都会拥有自己的作用域,每个实例也就是相互独立...
  • 如果组件直接将data定义一个对象的话,那么在模板中多次复用该组件,组件中的data会指向同一个引用。改变一个组件中的data,会导致其他组件data中的数据被污染。 而如果使用函数的话,每个组件中的data就会有...
  • Vue组件中data选项为什么必须是函数

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

    千次阅读 2018-12-26 23:44:31
    在 javascript 里面简单数据类型拷贝一般使用浅拷贝,复杂类型一般使用深拷贝,请看例子 var a = 0; var b = a; b = 1 console.log('a···' + a,'b···' + b) //a···0 b···1 可以看到我把 a 赋值给了...
  • 通过Vue构造器传入各种选项大多数都可以在组件用,唯独只有data选项有区别,在Vue构造器中data返回的是对象,但是在组建中必须返回一个函数。why?先来看下面一个例子:HTML: <simple-counter></simple-...
  • 为什么组件中 data 必须一个函数,然后 return 一个对象,而 new Vue 实例data 可以直接一个对象? // data data() { return { message: "子组件", childName:this.name } } // new Vue new Vue({...

空空如也

空空如也

1 2 3 4 5
收藏数 100
精华内容 40
关键字:

vue里的data为什么是函数

vue 订阅