精华内容
下载资源
问答
  • vue里的data为什么是函数
    2022-05-16 14:59:59

    1.每个组件都是 Vue 的实例

    2.组件共享data属性,当data的值是同一个引用类型的值时,改变 其中一个会影响其他

    3.组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的 data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据.而单纯的写成对象形式,就使得所有组件实例共用了一份 data,就会造成一个变了全都会变的结果

    更多相关内容
  • vuedata为什么必须是个函数

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

    vue中data必须是函数是为了保证组件的独立性和可复用性,data是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次,就分配几个内存地址,他们的地址都不一样,所以每个组件中的数据不会相互干扰,改变其中一个组件的状态,其它组件不变。

    vue中data必须是函数是为了保证组件的独立性和可复用性,data是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次,就分配几个内存地址,他们的地址都不一样,所以每个组件中的数据不会相互干扰,改变其中一个组件的状态,其它组件不变。

    Vue:

    Vue.js是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架。 2016年一项针对JavaScript的调查表明,Vue有着89%的开发者满意度。在GitHub上,该项目平均每天能收获95颗星,为Github有史以来星标数第3多的项目。Vue.js是一款流行的JavaScript前端框架,旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。

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

    千次阅读 2021-04-29 20:16:35
    也就是说如果data是一个函数的话,那么我们每次创建一个新的实例之后,就会调用一个新的data函数。也就是给每一个data数据定义一个新的内存地址。这样的话,修改A而不会影响B. function Person() { this.data = ...

    首先:

    组件是一个可复用的Vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用多少次,组件中data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就会被复制一次,、

    也就是说如果data是一个函数的话,那么我们每次创建一个新的实例之后,就会调用一个新的data函数。也就是给每一个data数据定义一个新的内存地址。这样的话,修改A而不会影响B.

    function Person() {
      this.data = this.data();
    }
    
    Person.prototype.data = function() {
      return {
        name: 'itclanCoder',
      };
    };
    
    var p1 = new Person();
    var p2 = new Person();
    
    p1.data.name = 'A'; // A
    console.log(p1.data.name); // A
    console.log(p2.data.name); // itclanCoder
    

    并且

    如果当data是一个对象的话,在Vue中是会报错的

    export default {
      data() {
          name: 'itclanCoder',
      },
    };
    

    在这里插入图片描述

    要了解函数和对象之间的区别:

    Object是引用数据类型,如果不用function返回,每个组件的data都是内存的同一个地址,一个数据改变了其他也改变了;

    JavaScript只有函数构成作用域(注意理解作用域,只有函数{}构成作用域,对象的{}以及if(){}都不构成作用域),data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响。

    总结:

    组件中的data写成函数,数据是以函数的返回值形式定义的,每复用一次,就会产生一个新的data。创建一个新的私有空间,这样的话各个组件实例都有各自的实例,如果写成对象形式,就容易造成数据污染,使得所有组件实例之间共用一份data

    展开全文
  • vuedata为什么是函数类型

    千次阅读 2020-07-30 08:19:50
    一、Vue.js中data的使用 我们先来回顾一下Vue的使用 <div id="app"> <p>{{ name }}</p> <p>{{ age }}</p> </div> var vm = new Vue({ el: '#app', data: { name: '...

    一个组件被复用多次的话,也就会创建多个实例。本质上,这些实例用的都是同一个构造函数。如果data是对象的话,对象属于引用类型,会影响到所有的实例。所以为了保证组件不同的实例之间data不冲突,data必须是一个函数。
    而 new Vue 的实例,是不会被复用的,因此不存在引用对象的问题。

    一、Vue.js中data的使用

    我们先来回顾一下Vue的使用

    <div id="app">
      <p>{{ name }}</p>
      <p>{{ age }}</p>
    </div>
    
    
    var vm = new Vue({
    	el: '#app',
    	data: {
    		name: 'Lpyexplore',
    		age: '21'
    	},
    	components: {}
    	methods: {}
    })
    
    

    这个例子一般是在我们刚开始学Vue.js时遇到的。我们在这创建了一个Vue的实例对象,并给该实例对象定义了一些属性,比如el 表示跟哪个标签关联 、data表示该实例对象的一些初始属性 、methods表示该实例对象具有的方法等等。一般我们会以组件化的思想去开发(别担心,马上讲解什么是组件化的思想),所以我们还会用到Vue实例对象中的另一个属性components去注册别的组件。

    我们先来了解一下什么是组件化思想,我们一般会在一个页面创建Vue实例,并以该页面作为主文件,然后将其他页面作为该文件的子文件(组件),如图
    在这里插入图片描述
    我们可以看到,图中的Vue实例这个页面就是我们刚开始创建的全局Vue实例对象渲染出来的页面,我们以该页面为主文件。然后想在图上添加什么东西,只需要再创建一个文件,在该文件中创建一个Vue实例,但不通过el进行挂载,而是直接通过注册的方式,注册到另一个页面,作为别的页面的一部分,例如图中的样子。正是因为没有进行挂载,所以这个Vue实例是可以被反复使用的,也就是说可以在很多个页面都注册一次。

    二、data为对象类型

    好了,回到我们的正题data,经过这样的讲解,我们明白,我们第一次创建的Vue实例只会在该页面渲染一次

    function Vue() {
    	this.data= {                   
    		name: '张三',
    		age: '21'
    	}     
    }
    
    //创建了一个Vue实例返回给vm,会调用上面的定义的函数,并创建一个对象,该对象中有data属性
    let vm =new Vue()
    
    //此时的vm应该是这样的   
    vm = {
    	data: {
    		name: '张三', 
    		age: '21'
    	}
    }
    
    //在创建了Vue实例以后我们就要进行渲染页面了
    //这里的name会调用vm.data.name
    <div>{{ name }}</div>
    
    

    三、data为函数

    看了上面的例子,我们再来看看data为函数的例子,一般只有在可复用的Vue实例中,data才为函数

    data: function() {
    	return {
    		name: '李四',
    		age: '55'
    	}
    }
    
    
    • 组件中data使用函数的情况

    其实当我们把组件注册到别的页面上时,也会创建一个Vue实例,就像这个样子

    function Vue() {
    	//此处data的值为一个函数,调用时会return返回一个对象
    	this.data = function() {
    		return {
    			name: '李四',
    			age: '55'
    		}
    	}
    }
    
    //创建了一个Vue实例,会调用上面的定义的函数
    let vm1 =new Vue()
    
    //此时的vm1应该是这样的
    vm1 = {
    	//这里的data,是先获取了函数Vue中的data(data的值为函数),然后得到了data的返回值
    	this.data = {
    		name: '李四',
    		age: '55'
    	}
    }
    
    //将数据渲染到页面上
    //此处的name会调用实例对象vm1.data.name
    <div>{{ name }}</div>     //会渲染成<div>李四</div>
    
    

    这时我们延续上面的例子,我们再在另一个页面注册一下该组件,这时有会调用函数Vue,创建一个实例对象

    //又创建了一个Vue实例,会调用上面的定义的函数
    let vm2 = new Vue()
    
    //此时vm2是这样的
    vm2 = {
    	//这里的data,是先获取了函数Vue中的data(data的值为函数),然后得到了data的返回值
    	data: {
    		name: '李四',
    		age: '55'
    	}	
    }
    
    //将数据渲染到页面上
    //此处的name会调用实例对象vm2.data.name
    <div>{{ name }}</div>     //会渲染成<div>李四</div>
    
    

    如果我们此时把实例对象vm2中的data.name 改为 王五,我们来看一下两个实例对象渲染的结果如何

    //此处的name会调用实例对象vm1.data.name
    <div>{{ name }}</div>   //渲染成  <div>李四</div>
    
    
    //此处的name会调用实例对象vm2.data.name
    <div>{{ name }}</div>   //渲染成  <div>王五</div>
    
    

    我们发现,当实例对象vm2改变了他的data.name值时,实例对象vm1中的data.name值并没有改变。这是因为这两个实例对象在创建时,是先获得了一个函数,将该函数的返回值作为了自己属性data的值,并且这两个实例对象中data的值在栈中对应的堆中的地址也不一样,所以他们不会互相影响。

    • 组件中data为对象的情况

    接下来我们来看一下,如果组件中data使用对象类型会发生怎么样的情况。

    首先先将组件注册到一个页面中,这时会创建一个实例对象vm1

    function Vue() {
    	//此处data的值为一个对象
    	this.data = {
    		name: '李四',
    		age: '55'
    	}	
    }
    
    //创建了一个Vue实例,会调用上面的定义的函数
    let vm1 =new Vue()
    
    //此时的vm1应该是这样的
    vm1 = {
    	//这里的data是获取了函数Vue中的data属性的值
    	data: {
    		name: '李四',
    		age: '55'
    	}
    }
    
    //将数据渲染到页面上
    //此处的name会调用实例对象vm1.data.name
    <div>{{ name }}</div>     //会渲染成<div>李四</div>
    
    

    我们在将该组件注册到另一个页面上,此时会创建一个实例对象vm2

    function Vue() {
    	//此处data的值为一个对象
    	this.data = {
    		name: '李四',
    		age: '55'
    	}	
    }
    
    //创建了一个Vue实例,会调用上面的定义的函数
    let vm2 =new Vue()
    
    //此时的vm1应该是这样的
    vm2 = {
    	//这里的data是获取了函数Vue中的data属性的值
    	data: {
    		name: '李四',
    		age: '55'
    	}
    }
    
    //将数据渲染到页面上
    //此处的name会调用实例对象vm2.data.name
    <div>{{ name }}</div>     //会渲染成<div>李四</div>
    
    

    这时,我们改变实例对象vm2中data.name的值,改为王五,我们再来看一下这个组件在两个页面中分别渲染成什么样子

    //此处的name会调用实例对象vm1.data.name
    <div>{{ name }}</div>   //渲染成  <div>王五</div>
    
    
    //此处的name会调用实例对象vm2.data.name
    <div>{{ name }}</div>   //渲染成  <div>王五</div>
    
    

    我们可以看到,只改变了实例对象vm2中的data.name,为何实例对象vm1中的data.name值也改变了?这里就是要理解引用数据类型的概念了,如果还有不懂得,赶紧翻到引言部分,去看一下。

    因为我们刚开始定义了构造函数Vue时,给他内部的data设置了一个值,该值为对象类型,对象类型在js中称为引用数据类型,在栈中是存储着一个指向内存中该对象的堆中的地址。当我们创建一个实例对象时,要获取函数中的data,其实只是获取了那个堆中的地址,同样的,创建第二个实例对象时,获取的也是那个地址,然而该地址指向的都是同一个数据,也就是{name: ‘李四’, age: ‘55’},所以当我们改变其中一个实例对象的data.name时,其实是先顺着地址去找到内存中的那个对象,然后改变一些值,但是因为所有创建的实例都是按照地址去寻找值的,所以其中一个改变,另一个也跟着改变啦。

    下面放上一个图,让大家更容易理解
    在这里插入图片描述
    所以我们在使用复用型组件时,申明data属性的值时,必须要使用函数类型,因为每次创建实例对象时,他们都是获取属于他们自己的一个对象值,并且对应的堆中的地址都不相同,所以互不影响。此时的情况用图这样表示:
    在这里插入图片描述

    结束语

    所以讲了那么多,还是一个概念,引用数据类型的表现形式,如果还是有小伙伴不懂的,一定要翻到引言部分,点击链接去看一下这个概念,否则很难理解本篇文章。因为本文也是说到构造函数创建实例对象的概念,如果对于JavaScript中对象的概念不理解的话,也可以翻阅我之前写的一篇文章,全面剖析了js中的对象概念——充分了解JavaScript中的对象,顺便弄懂你一直不明白的原型和原型链。

    希望这篇文章能解开你们心中的疑惑,喜欢的点个关注,加个收藏,谢谢各位。

    转载自:https://blog.csdn.net/l_ppp/article/details/106673156#comments_12921812

    展开全文
  • Vue 组件中的 data 为什么是函数

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

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

    千次阅读 2022-05-25 08:45:00
    为什么data要是一个函数?
  • vuedata数据为什么定义成函数形式

    千次阅读 2022-03-31 23:51:46
    1,data组件都是vue的实例 2,组件共享data属性,当data的值是用一个引用类型的时候,改变其中的值会影响到其他的 3,组件中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件,都会返回一份新的...
  • 为什么Vue组件中的Data是一个函数?

    千次阅读 2022-03-09 15:40:43
    Vue组件中的Data是一个函数的话,每次复用组件都会返回一份私有的Data。相当于给每个组件实例都定义了一份私有的数据空间。每个组件都有自己的作用域,数据不会互相产生影响。若是对象的话,每个组件中的实例就会...
  • 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' }, {...
  • vue中的data为什么是一个函数?起到什么作用?
  • 为什么Vue中的data必须是一个函数

    千次阅读 2022-01-27 12:59:22
    为什么data必须是一个函数? 如下有一个例子: const MyCom=function(){} MyCom:prototy.data={ a:1, b:2 } const obj1=new MyCom(); const obj2=new MyCom(); //只改变obj1.data.b obj1.data.b=10 console.log(obj1....
  • vue组件中data为什么是函数?而不是对象
  • 为什么vuedata必须是一个函数

    万次阅读 多人点赞 2019-03-28 10:25:54
    本文从JavaScript原型链角度来解释为什么vue中的data必须是一个函数 VUE组件中的data必须是函数 类别引用数据类型 Object是引用数据类型,如果不用function返回,每个组件的data都是内存的同一个地址,一个数据...
  • Vue--为什么data是个函数--实例讲解

    多人点赞 热门讨论 2022-01-06 00:13:03
    本文用示例介绍Vue中的data设计为函数的原因。 结论 对象是一个引用数据类型,如果data是一个对象会造成所有组件共用一个data。若data是一个函数,每次函数都会返回一个新的对象,这样每个组件都会维护一份独立的...
  • vue中的data为什么是函数 1.vue中组件是用来复用的,为了防止data复用(同一个组件被复用多次会创建多个实例)。 2.vue组件中的data数据都应该是相互隔离,互不影响的,组件每复用一次,data数据就应该被复制一次,...
  • 分析Vue.js组件中的data为何是函数类型而非对象类型引言正文一、Vue.js中data的使用 引言 要理解本篇文章,必须具备JavaScript中对象的概念,如果有想要深入了解的小伙伴,可以查看我之前剖析的js中对象概念的一篇...
  • vuedata必须是函数

    千次阅读 2017-10-08 20:57:52
    看了好多博客论坛啥的,我比较笨不是很理解,包括我之前转载的一篇,不过我转载的我是看懂了,今天没事重新过了下官网,下面我们一起看看官网是如何给出解答的,这里面第一...通过 Vue 构造器传入的各种选项大多数都可
  • vue 组件中的 data 为什么必须是函数

    千次阅读 多人点赞 2018-12-26 23:44:31
    如果能理解深浅拷贝就可以理解 data 为什么要用函数了 在创建或注册模板的时候传入一个 data 属性作为用来绑定的数据。但是在组件中,data必须是一个函数,因为每一个 vue 组件都是一个 vue 实例,通过 new Vue() ...
  • Vue组件的出现是为了组件中的视图和数据可以复用(可以简单理解js中的函数封装),被复用的组件在不同的复用位置可能在操作不同的数据,所以每个组件的data数据必须相互独立,所以组件中的data是一个函数函数...
  • 为什么要把data变成函数并return属性呢? 组件是一个可复用的实例,当你引用一个组件的时候,组件data是一个普通的对象,所有用到这个组件的都引用的同一个data,就会造成数据污染。 将data封装成函数后,在实例...
  • vue data 为什么返回一个函数

    千次阅读 2019-02-25 15:18:54
    但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它。 Vue.component('my-component', { template: '&amp;lt;div&amp;gt;hello Vue&amp;lt;/div&amp;gt;', da...
  • Vue 组件 data为什么是函数

    千次阅读 2017-10-08 16:34:30
    但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它。 Vue.component('my-component', { template: 'OK', data() { return {} // 返回一个唯一的对象,不要和其他组件共用一个对象进行返回 }, })...
  • 2)为什么组件中的data必须是一个函数? 答: 2.1)因为如果data是一个对象,对象是引用类型,那复用的所有组件实例都会共享这些数据,就会导致修改一个组件实例上的数据,其他复用该组件的实例上对应的数据也会被...
  • 面试题:为什么vue组件中的data是一个函数而不是一个对象? JavaScript中的对象是引用类型的数据,当多个实例引用同一个对象时,只要一个实例对这个对象进行操作,其他实例中的数据也会发生变化。 而在Vue中,我们更...
  • vue--为什么data属性必须是一个函数

    千次阅读 2019-02-26 17:25:21
    问题描述:为什么vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性。 原因:因为我们能抽离出来的组件,肯定是具有复用性的,它在项目中会存在多个实例。如果data...
  • vue核心面试题:组件中的data为什么是一个函数

    万次阅读 多人点赞 2020-08-17 19:53:24
    2.vue组件中的data数据都应该是相互隔离,互不影响的,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响,就需要通过data函数返回...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 150,407
精华内容 60,162
关键字:

vue里的data为什么是函数

友情链接: yejing.rar