精华内容
下载资源
问答
  • 我们需要先复习下原型链的知识,其实这个问题取决于 js ,而并非是 vue 。 function Component(){ this.data = this.data } Component.prototype.data = { name:'jack', age:22, } 首先我们达成一个共识(没有这...
  • 在 new Vue() data 是可以作为一个对象进行操作的,然而在 component data 只能以函数的形式存在,不能直接将对象赋值给它。 new Vue({ el: '#app', data: { message: 'Love' }, template: '<p>...

    new Vue() 和component组件中使用

    new Vue() 中,data 是可以作为一个对象进行操作的,然而在 component 中,data 只能以函数的形式存在,不能直接将对象赋值给它。

    new Vue({
        el: '#app',
        data: {
            message: 'Love'
        },
        template: '<p>It’s great to love cakes.</p>'
    })
    // 因为组件是可复用的 Vue 实例
    // 定义一个名为 button-counter 的新组件
    Vue.component('button-counter', {
      data: function () {
        return {
          count: 0
        }
      },
      template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
    })

    data为什么是函数, 不是对象?

    这并非是 Vue 自身如此设计,而是跟 JavaScript 特性相关,我们来回顾下 JavaScript 的原型链

    var Component = function() {};
    Component.prototype.data = {
        message: '10'
    }
    var component1 = new Component(),
        component2 = new Component();
    component1.data.message = '20';
    console.log(component2.data.message);  // 20
    
    // 上面原因是因为component1和component2的属性data引用的是同一个内存地址

    从上面可以了解到,vue组件就是一个vue实例。

    JS中的实例是通过构造函数来创建的,每个构造函数可以new出很多个实例,那么每个实例都会继承原型上的方法或属性。vuedata数据其实是vue原型上的属性,数据存在于内存当中。vue为了保证每个实例上的data数据的独立性,规定了必须使用函数,而不是对象。

    因为使用对象的话,每个实例(组件)上使用的data数据是相互影响的,这当然就不是我们想要的了。对象是对于内存地址的引用,直接定义个对象的话组件之间都会使用这个对象,这样会造成组件之间数据相互影响。

    以上两个实例都引用同一个对象,当其中一个实例属性改变时,另一个实例属性也随之改变,只有当两个实例拥有自己的作用域时,才不会互相干扰。

    var Component = function() {
        this.data = this.data()
    }
    Component.prototype.data = function(){
        return {
            message: '10'
        }
    }
    var component1 = new Component(),
        component2 = new Component();
    component1.data.message = '20';
    console.log(component2.data.message);  // 10

    为什么使用函数不会有这种问题

    使用函数后,使用的是data()函数,data()函数中的this指向的是当前实例本身。

    展开全文
  • 今天学习vue组件的时候,发现组件里面的东西,其实和定义的root实例...这是为什么呢下面举一个小例子来类比一下 正确的定义一个组件: //定义组件 <template id="cpn"> <div> <h2>我是{{name}}...

    今天学习vue组件的时候,发现组件里面的东西,其实和定义的root实例里面的东西时一样的,除了data。这个data必须是function类型,而且必须返回一个实例对象的值,里面的值就是定义的data。这是为什么呢下面举一个小例子来类比一下

    正确的定义一个组件:
    //定义组件
    <template id="cpn">
    	<div>
    		<h2>我是{{name}}</h2>
    	</div>
    </template>
    //使用组件
    <div class="app">
    	<cpn-text></cpn-text>
    </div>
    //注册组件
    const appbox = new Vue({
    		el:".app",
    		data:{
    			msg:'haha'
    		},
    		components:{
    			cpnText:{
    				template:'#cpn',
    				data(){
    					return {
    						name:'小小的一个组件'
    						}
    				}
    			}
    		}
    	})
    

    效果:
    组件效果


    但是如果将组件的data写成:

    data:{
      name:'小小的一个组件'
    }
    

    会报这样的错误:
    错误提示

    分析

    如果data允许这么写,那么就像所有复用这个组件的地方,都在使用这个组件里面的唯一一个data,所有使用组件的地方的data都会指向栈内这一个data的地址,那么会造成一个改data的值,所有的data都会改,因为vue中如果直接写成像root实例当中data那样会直接报错,那么可以转换一下思路,重新将组件中的这一情况类比成一下这种情况:

    <template id="cpn">
    	<div>
    		<h2>我是{{name}}</h2>
    		<button @click="change()">改变</button>	<!-- 多增加一个按钮用于改变data的值 -->
    	</div>
    </template>
    //使用组件
    <div class="app">
    <!-- 复用多次组件 -->
    	<cpn-text></cpn-text>
    	<cpn-text></cpn-text>
    	<cpn-text></cpn-text>
    </div>
    //注册组件
    const obj = {
    		name:'我是一个小小的组件'
    	}//定义一个存放数据的对象,假设这里就是data:{}
    const appbox = new Vue({
    		el:".app",
    		data:{
    			msg:'haha'
    		},
    		components:{
    			cpnText:{
    				template:'#cpn',
    				data(){
    					return obj;//这里类比只有一个data对象
    				},
    				methods:{
    					change(){
    						this.name = '一个改变了的组件'
    					}
    				}
    			}
    		}
    	})
    

    效果:
    组件改变
    点击改变
    所有都改变了

    如果返回实例对象
    <template id="cpn">
    	<div>
    		<h2>我是{{name}}</h2>
    		<button @click="change()">改变</button>	<!-- 多增加一个按钮用于改变data的值 -->
    	</div>
    </template>
    //使用组件
    <div class="app">
    <!-- 复用多次组件 -->
    	<cpn-text></cpn-text>
    	<cpn-text></cpn-text>
    	<cpn-text></cpn-text>
    </div>
    //注册组件
    const appbox = new Vue({
    		el:".app",
    		data:{
    			msg:'haha'
    		},
    		components:{
    			cpnText:{
    				template:'#cpn',
    				data(){
    					return {
    					name:'我是一个小小的组件'
    					}
    				},
    				methods:{
    					change(){
    						this.name = '一个改变了的组件'
    					}
    				}
    			}
    		}
    	})
    

    正常显示

    总结

    当我们开发人员使用组件的时候,肯定希望各个部分除了基本功能通信,自己基本的值不会变,比如一个轮播组件,一个页面需要两个轮播,但是你在因为自己的需求改变第一个轮播组件其中的某些data值的时候,另外一个也跟着改变了,这就会出现很多矛盾和错误,所以为了避免这种情况的发生,VUE组件当中将data 编写为定义的时候需要以函数的形式出现,而且必须返回一个实例对象的值。
    因为返回实例对象的值的时候,如果你每次都复用一次,在内存栈里面会另外开辟一片内存空间,每个组件指向的数据栈是不同的,这样就实现了互不影响,如果改变一个的值,那么另外的组件根本不会收到影响。而不是都指向同一个内存地址,影响其他组件的使用

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

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

    本文从JavaScript原型链角度来解释为什么vue中的data必须是一个函数

    VUE组件中的data必须是函数

    类别引用数据类型

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

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

    例如:

    const MyComponent = function() {};
    MyComponent.prototype.data = {
        a: 1,
        b: 2
    }
    const component1 = new MyComponent();
    const component2 = new MyComponent();
    
    component1.data.a === component2.data.a; // true
    component1.data.b = 5;
    component2.data.b //5

     如果两个实例同事引用一个对象,那么当你修改其中一个属性的时候,另外一个实例也会跟着该;

    两个实例应该有自己各自的域才对,需要通过下面的方法进行处理

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

    这样么一个实例的data属性都是独立的,不会相互影响了。

    所以,你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的,跟vue本身设计无关。其实vue不应该把这个方法取名为data(),应该叫setData或其他更容易理解的方法名。

     

     

     

    展开全文
  • 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.js组件data为何是函数类型而非对象类型引言正文一、Vue.js中data的使用 引言 要理解本篇文章,必须具备JavaScript对象的概念,如果有想要深入了解的小伙伴,可以查看我之前剖析的js对象概念的一篇...
  • 2.vue组件的data数据都应该是相互隔离,互不影响的,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响,就需要通过data函数返回...
  • 主要介绍了vue data不可以使用箭头函数问题,本文通过源码解析给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • vue2.X组件中data为什么是一个函数?曾经的困惑,今天我就好好总结一下。 在vue实例上data定义的是一个对象: new Vue({ el: '#blog-post-demo', data: { posts: [ { id: 1, title: 'My journey with Vue' }, {...
  • Vue中data为何以函数形式返回

    千次阅读 2020-06-27 10:03:16
    在一个Vue简单实例,也就是不使用组件化实现的时候,data可以是一个对象,因为本身也只有一个实例,就不存在多个实例共享的问题。 <!DOCTYPE html> <html> <head> <title>Vue</title&...
  • vue 组件data 为什么必须是函数

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

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

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

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

    千次阅读 2018-09-27 18:21:09
    data的值是一个对象, 是引用数据类型,如果不用函数return ,每个组件的data 都是同一个对象,一个数据改变了其他也改变了; 所以为了不让多处的组件共享同一data对象,只能返回函数。 更深的理解 ...
  • 为什么data必须是一个函数呢? 我们来看Vue在声明式渲染给出的一个demo: <div id="app">{{ message }}</div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) 在这...
  • vue组件中data为什么必须是一个函数

    千次阅读 2020-03-21 18:11:57
    总结: 综上可知,如果data是一个函数的话,这样每复用一次组件,就会返回一份新的...所以说vue组件的data必须是函数。这都是因为js的特性带来的,跟vue本身设计无关。 js本身的面向对象编程也是基于原型链和构造...
  • 组件中为什么data必须是一个函数 如果不是函数 如果组件中的data不是一个函数,首先vue是会报错的,因为它内部规范组件中的data必须是个函数。 那为什么必须是个函数呢?大家接着看看 既然它要求返回一个对象,那...
  • 主要给大家介绍了关于Vue的组件中data选项为什么必须是函数的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
  • vue--为什么data属性必须是一个函数

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

    千次阅读 2017-10-08 16:34:30
    但是在组件data必须是一个函数,而不能直接把一个对象赋值给它。 Vue.component('my-component', { template: 'OK', data() { return {} // 返回一个唯一的对象,不要和其他组件共用一个对象进行返回 }, })...
  • 最近在搞关于前端开发的基础知识归纳,发现了不少经典知识点,那么本篇博文就来分享一个经典的知识点:Vue组件data属性值为什么是函数而不是对象。 首先来了解一下Vue组件的使用理念:在Vue组件使用,组件...
  • Vuevue中data为什么是一个函数

    千次阅读 2019-04-18 16:04:20
    为什么在项目中data需要使用return返回数据呢? 大家知道用组件化来写vue项目,每个.vue文件都是一个个组件。那什么是vue中的组件? 官网写的很易懂——组件就是一个可复用的vue的实例。 这也就意味着如果你的data是...
  • 面试题:为什么vue组件data是一个函数而不是一个对象? JavaScript的对象是引用类型的数据,当多个实例引用同一个对象时,只要一个实例对这个对象进行操作,其他实例的数据也会发生变化。 而在Vue中,我们更...
  • Q: vue中data为什么是一个函数 类型:Object | Function 限制:组件的定义只接受 function 当一个组件被定义,data 必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例。如果 data 仍然...
  • 如果是对象会导致 对象是引用类型,当同一个组件被多次...将data设置一个函数,该函数会返回一个初始数据对象,用function return 其实就相当于申明了新的变量,相互独立 data () { return { items: ['a', '...
  • vue中data返回一个函数

    千次阅读 2020-04-23 23:45:44
    function person() { return { name:"a", } };...是见面的时候直接给(每人给一个data),还是告诉他们地址他们去拿(给一个地址,自己去拿,但是修改了data的话,其他人拿到的就是修改之后的data)。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 116,307
精华内容 46,522
关键字:

vue中data为什么是函数

vue 订阅