精华内容
下载资源
问答
  • 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 里面的数据为什么要return 出来

    请先看下面示例

    var obj={
            name:"zhangsan",
            age:20
          }
          var a=obj;
          var b=obj;
          a.age=18
          console.log(a,b)   // {name: "zhangsan", age: 18} {name: "zhangsan", age: 18}
    

    这是为什么呢 因为JS中Object是引用数据类型,我定义变量a和b等于obj对象时只是进行了对象的浅拷贝,a和b的值其实只是一个指向obj对象的地址(也就是栈),
    在我修改a.age时,JS 会通过变量a这个路径 去找到obj对象的堆空间里面的值,进行修改。。。当输出 a,b时,都是通过栈空间里面的这条路径,去找到堆空间里面的值,输出!

    再看return示例

    var data=function(){
            return{
              name:"zhangsan",
              age:20
            }
          }
          var a=data();
          var b=data();
          a.age=18
          console.log(a,b)   //{name: "zhangsan", age: 18} {name: "zhangsan", age: 20}
    

    这又是为什么呢?因为在JS 中只有函数才存在作用域,data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响,也叫闭包!!

    展开全文
  • vue组件中data必须是一个函数的原因

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

    vue组件中data值不能为对象,因为对象是引用类型,组件可能会被多个实例同时引用。如果data值为对象,将导致多个实例共享一个对象,其中一个组件改变data属性值,其它实例也会受到影响。

    上面解释了data不能为对象的原因,这里我们简单说下data为函数的原因。data为函数,通过return 返回对象的拷贝,致使每个实例都有自己独立的对象,实例之间可以互不影响的改变data属性值。

    data为函数的示例:

    data:function(){
        return {
                k1: 'v1',
                k2: 'v2',
            ...
        }
    }

    原创文章,转载请标明出处:https://blog.csdn.net/yihanzhi/article/details/80350253

    展开全文
  • 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选项为什么必须是函数

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

    万次阅读 多人点赞 2021-01-25 15:43:45
    Vue组件(一)      Vue组件介绍  ...组件中data 和 el 选项      使用 <script> 或 <template> 标签 V组件 组件系统是Vue
  • Vue组件data等属性

    千次阅读 2018-09-28 10:54:48
    1.组件中data属性的内容,必须是一个function类型,并且必须要有返回值。用法跟实例data使用是一样的,同时也有实例化对象的其他属性如,methods 2.因为如果,不是这里面的对象,而是一个公共的对象实例,...
  • vue 组件中data 为什么必须是函数

    千次阅读 多人点赞 2018-12-26 23:44:31
    但是在组件中data必须是一个函数,因为每一个 vue 组件都是一个 vue 实例,通过 new Vue() 实例化,引用同一个对象,如果 data 直接是一个对象的话,那么一旦修改其中一个组件的数据,其他组件相同数据就会被改变...
  • Vue组件基础有这样一句话:data必须是一个函数。 为什么data必须是一个函数呢? 我们来看Vue在声明式渲染给出的一个demo: <div id="app">{{ message }}</div> var app = new Vue({ ...
  • Vue组件中 data 从props动态更新数据 考虑这样一种情况,Vue 的父组件根据接口 api 获取到数据后,动态更新到子组件的 props 上,这本身也是一个较为简单的操作, // 父组件 <template> <div class=...
  • 为什么Vue组件中data是一个函数原理(详细易懂)

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

    千次阅读 2018-09-03 17:07:33
    并且这个组件在页面中使用了3次,点击+1时出现了如下情况:data中的count属性影响到了所有实例。 &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content=&...
  • vue组件改变父组件中data的值

    万次阅读 2019-03-17 21:19:49
    那么改如何在子组件中修改父组件data中变量呢? 既然子组件无法获取父组件的变量,那就让父组件自己修改自己的数据--&gt;子组件调用自己的方法,该方法中调用this.$emit方法用来通知父组件“你该去修改你的...
  • vue2 子组件调用父组件data中的值

    千次阅读 2017-06-22 17:22:43
    vue2 子组件调用父组件data中的值
  • 33.Vue组件中data数据属性

    千次阅读 2018-12-01 18:50:15
    //组件中的数据引用和vue实例data中的数据引用方式一样 {{变量名}} data : function (params) { return{ haha : '这是组件中自定义的数据!' } ; } }); var vm = new Vue({ el : '#app', data : { msg : ...
  • 一、父组件改变子组件data组件parent.vue &lt;template&gt;  &lt;div&gt;  &lt;span style="height:100px;"&gt;父组件&lt;/span&gt;  &lt;button @...
  • Vue 组件 data为什么是函数?

    千次阅读 2017-10-08 16:34:30
    但是在组件中data必须是一个函数,而不能直接把一个对象赋值给它。 Vue.component('my-component', { template: 'OK', data() { return {} // 返回一个唯一的对象,不要和其他组件共用一个对象进行返回 }, })...
  • 1.需求:在PC端实现数据滚动加载效果 筛选vue中组件再三 决定使用vue-data-loading 效果还是蛮赞的 官网地址:https://github.com/bedlate/vue-data-loading/blob/master/README_CN.md 2.简单的事例 官网已有...
  • Vue教程(组件-data和methods)

    万次阅读 2019-07-24 15:02:40
      在上篇文章的基础上我们继续来介绍下Vue组件中data和methods属性,这两个属性和我们介绍的Vue实例中data和methods属性很类似,使用方式也是一样的 Vue的data和methods属性   先准备一个基础页面,在其中创建...
  • Vue组件基础--简单了解vue组件

    千次阅读 多人点赞 2020-09-03 08:45:34
    Vue组件基础–简单了解vue组件 Vue组件是什么? 组件就像是提前做好的模具,使用时拿出来就行,可以重复调用,它跟普通的Vue有一样的属性: data (数据存放) computed(计算属性) watch(监听属性) methods...
  • Vue 组件中数据的定义

    千次阅读 2019-07-30 21:54:30
    Vue 组件中数据的定义 为什么组件中data选项是一个函数,而根实例是对象 原因: (1). 组件是一个独立的整体,那么数据也应该是一个独立的 【 80% 】 (2). 多人开发,数据如果不是独立的,那么数据会冲突 ...
  • 全局组件&amp;lt;/div&amp;gt;&quot;, data:function(){ return { name:&quot;css3html5&quot;, date:&quot;20190223&quot; } } }) es6函数简写为 Vue.compon
  • msg:'全局组件中使用data的方式' } } }) Vue.component('indexComponent',{ template:'这是一个全局的组件</h1>' }) var vm = new Vue({ el: '#app', data: { flag: true }, ...
  • Vue 组件 data 为什么必须是函数 文章目录Vue 组件 data 为什么必须是函数要理解这个问题,得从原型说起3 个栗子 理解后在看源码使用 debugger,看下 new vue 发生了什么1. 走到了初始化 vue 的步骤2. 来到 init ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 160,659
精华内容 64,263
关键字:

vue组件中的data

vue 订阅