写点什么

前端开发:关于 Vue 组件中的 data 属性值是函数而不是对象的详解

作者:三掌柜
  • 2021 年 12 月 19 日
  • 本文字数:1666 字

    阅读完需:约 5 分钟

前端开发:关于Vue组件中的data属性值是函数而不是对象的详解

前言


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


概念


首先来了解一下 Vue 组件的使用理念:在 Vue 组件使用中,组件复用是需要秉承的理念,组件创建好之初就要考虑到后期可复用性,考虑到可复用性,那么就涉及到组件中 data 数据是要相互独立、互不影响的,不管组件复用多少次,data 数据都要被复制一遍,这样当某一处复用的组件数据发生变化的时候,其他地方的复用组件的 data 数据不受影响。而且由于 JS 的特性所致的原因,在 component 中,data 属性值必须是以函数的形式存在,而不是对象。


示例


1、来看一下在 Vue 组件中 data 的属性值是函数,如下所示:

export default {
   data() { // data是一个函数, data: function() {}的简写
     return {
       name: 'sanzhanggui',   // 页面要初始化的数据
         };
     },
};
复制代码


2、再来看一下不在 Vue 组件中 data 的属性值为对象,如下所示:

export default {
   data: {   // data是一个对象
     name: 'sanzhanggui',
   },
};
复制代码


通过上述对比,可以只看出 Vue 组件中的 data 属性值是函数而不是一个对象的原因。再根据 JS 中的对象是引用类型的数据,当多个实例引用同一个对象的时候,只要其中一个实例对该对象进行操作的话,其他实例中的数据也会发生变化;而在 Vue 中更多的是组件复用思想,需要每个组件都有该组件自己的数据,这样组件之间才不会相互影响干扰。因此,Vue 组件中的数据不能写成对象的形式,要写成函数的形式;组件中 data 写成一个函数,数据以函数返回值来定义,每次组件复用的时候就会返回一个新的 data,这样每个组件都有属于该组件的专有空间,各个组件有各自的数据,这样就不会干扰其他组件的运行操作。


在 Vue 中,每一个.vue 文件都是一个组件,可以用作一个个单独的组件来进行复用,如果组件需要复用,那么组件中的 data 数据就一定会被复用,但是组件复用也不是单纯的在不同界面展示相同数据,所以 data 的属性值设置为对象的话,其中一处相同的 data 数据发生改变会造成全局复用的 data 数据跟着改变,data 的属性值设置为函数的话,通过 return 对返回对象的复制拷贝,新建一个新的空间地址,这样就使每个实例都有单独的对象,即使发生数据改变,也只是在当前实例自己的作用域改变,不会引起其他实例的数据改变,达到实例之间不会相互影响干扰的目的。


对比


再举一个对比写法,如下所示:


function Func(){
       }
        Func.prototype.data={
            msg:"111",
        };
        var a1=new Func();
        var a2=new Func();
        a1.data.msg="222";   //------ 如果data的属性是以对象的形式定义,修改其中一个实例的属性,会引起另一个实例的属性跟着修改
        console.log(a1.data.msg); //------ 输出结果为:222
        console.log(a2.data.msg); //------ 输出结果为:222
复制代码


function Func(){
            this.data=this.data();
        }
        Func.prototype.data=function(){
            return{
                msg:"111"
            }
        };
        var a1=new Func();
        var a2=new Func();
        a1.data.msg="222"; //------如果data的属性是以函数的形式去定义,这样每个实例都有自己的作用域,在修改自己数据的时候不会干扰影响其他实例的数据
        console.log(a1.data.msg); //------输出结果为:222
        console.log(a2.data.msg); //------输出结果为:111
复制代码


通过上述①②两个写法对比,可以直观的看到为什么组件中的 data 属性值要写成函数而不是对象。

最后


通过上文做的对比讲解,读者可以知道在前端 Vue 开发中关于 data 属性值的详解,在以后前端开发中也会很好的使用,这里就不再赘述。欢迎关注三掌柜的微信公众号“程序猿 by 三掌柜”,三掌柜的新浪微博“三掌柜 666”,欢迎关注!

发布于: 1 小时前阅读数: 6
用户头像

三掌柜

关注

某某某技术有限责任公司架构师 2021.02.05 加入

一分耕耘,不一定有一分收获,但十分耕耘,一定会有一分收获!

评论 (1 条评论)

发布
用户头像
12月日更、28 天写作计划第十八天
1 小时前
回复
没有更多了
前端开发:关于Vue组件中的data属性值是函数而不是对象的详解