评论

关于vue组件中data数据是以函数返回值形式而不是对象的解释

关于vue组件中data数据是以函数返回值形式而不是对象的解释

在前面学习vue时,知道了vue实例中定义的data数据可以有两种形式

  1. 以对象形式存放
  2. 以函数返回的形式
    当时只是听说函数返回有优势,但由于对象形式的方便和容易理解,我就一直用的对象形式存放在data中,直到我之后学到组件模块化开发

然后带着问题去翻阅各路大佬博客和官方文档,明白了这么做的原因,本篇博文以官方文档给出的原因为基础,来阐述这么设计的原因。

首先,明确一下组件的概念,组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的。基于这一理念,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响
注意:不受影响!!!

data() {
    return{
       count: 0
    }             
 }

而不用函数定义

data:{
       count:0
 }

当data如此定义后,这就表示所有的组件实例共用了一份data数据,因此,无论在哪个组件实例中修改了data,都会影响到所有的组件实例

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

觉得本篇文章对你有帮助的请不要忘记给文章点个赞

点赞 6
收藏
评论

4 个评论

  • TYXX
    TYXX
    发表于小程序端
    2021-11-17

    相当于其他语言中static成员和非static成员的区别?

    2021-11-17
    赞同 2
    回复 1
    • Smooth
      Smooth
      2021-11-17
      有点那意思
      2021-11-17
      1
      回复
  • Lanh
    Lanh
    2021-11-17

    意思就是说,用函数相当于“局部变量”,对象就相当于“全局变量”,对吗?

    2021-11-17
    赞同 2
    回复 2
    • 晨曦
      晨曦
      2021-11-17
      我感觉更像是类定义中的static成员和非static成员。
      2021-11-17
      回复
    • Smooth
      Smooth
      2021-11-17
      对,通俗来说可以这么理解,函数的话有一个自己的定义域了,不会泄露
      2021-11-17
      1
      回复
  • ...
    ...
    2021-11-17

    长知识了

    2021-11-17
    赞同 1
    回复 1
    • Smooth
      Smooth
      2021-11-17
      一起进步~
      2021-11-17
      1
      回复
  • 谋谋谋
    谋谋谋
    2021-11-17

    学到了学到了 厉害了

    2021-11-17
    赞同 1
    回复 1
    • Smooth
      Smooth
      2021-11-17
      一起成长~
      2021-11-17
      1
      回复
登录 后发表内容