专栏首页女程序员的日常_Lin为什么vue中的data必须是一个函数?

为什么vue中的data必须是一个函数?

概述

1. 引用类型与函数区别

引用类型与函数

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

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

用法

JS中有三种执行上下文类型:

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

component1.data.a  = component2.data.a;
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属性都是独立的,不会互相影响。

这是js本身的特性带来的,跟vue本身设计无关。

参考:

  • https://cn.vuejs.org/v2/guide/components.html#data-%E5%BF%85%E9%A1%BB%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0
  • https://www.jianshu.com/p/839cbef3be41

本文分享自微信公众号 - 女程序员的日常(gh_df41d619fb70),作者:凛

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-06-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue 中 data 为什么必须是一个函数

    可以看到,componentA 和 componentB data 之间指向了同一个内存地址,age 都变成了 40,导致了问题 因此,data 如果单纯的写...

    Leophen
  • Vue 组件中的 data 为什么必须是函数

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

    Nian糕
  • vue中组件的data为什么是一个函数

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

    小蔚
  • 框架篇-Vue面试题1-为什么 vue 组件中的 data 是函数而不是对象

    当一个组件被定义,data必须声明为返回一个初始数据对象的函数,因为组件可能被用来创建多个实例

    itclanCoder
  • 面试官:为什么data属性是一个函数而不是一个对象?

    在我们定义好一个组件的时候,vue最终都会通过Vue.extend()构成组件实例

    @超人
  • 来吧!一文彻底搞定Vue组件!

    组件是什么呢,了解组件对象的分析,Vue组件中的data属性,props传递数据的原理到底是什么。

    达达前端
  • 声明式渲染与 data 函数

    这是学习vue开发,必先了解的第一个特征。如前已经实现的App.vue组件,已经包括声明式渲染:

    程序员LIYI
  • 一个网站开发人员必须掌握的知识是什么?

    WWW - 万维网 web站点是一个到世界各地电脑都可以连接上的网络。他是如何工作的呢?

    用户1685462
  • Vue前端面试2021-016

    v-text/v-html 用于渲染数据 v-once 用于一次性加载数据 v-show/v-if 用于条件判断渲染数据 v-if /v-for 用于程序...

    大牧莫邪
  • 前端面试题Vue答案

    追问:computed 和 watch 应用场景? 关键词 computed+缓存

    酷走天涯
  • VUE.js高级

    首先先更正一下昨天发送内容的错误之处,对你造成的影响深表歉意。对照昨天的文章:ajax和vue.js(此处连接方便大家查看对照)中第6部分vue的事件与函数中,...

    小闫同学啊
  • Vue相关的前端面试题,每道题都很经典~

    用户1687375
  • Vue3.x 关于组件的那些变化(新手必看篇)

    我们试着先做一个计数器案例,把 data 的返回形式修改成一个对象。具体的代码如下:

    呆呆
  • Vue前端面试2021-017

    Vue中的过滤器主要是用来按照指定的格式进行数据输出格式渲染,声明过程中根据使用的方式不同可以声明为全局过滤器或者局部过滤器

    大牧莫邪
  • 是否还在疑惑Vue.js中组件的data为什么是函数类型而不是对象类型

    要理解本篇文章,必须具备JavaScript中基本数据类型和引用数据类型的概念,大家可以花两分钟看一下,瞬间就能理解——面试题被问到再也不慌,深究JavaScr...

    @零一
  • 老司机读书笔记——Vue学习笔记

    在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转变为使...

    老司机Wicky
  • vue 开发规范

    组件名为多个单词,并且用连接线(-)连接,避免与 HTML 标签冲突,并且结构更加清晰。

    java攻城狮
  • vue.js如何快速入门第1篇

    vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于...

    RDSunday
  • Vuejs --01 起步

    一、是什么      1、是一套构建用户界面的渐进式框架,Vue采用自底向上增量开发的设计           1.1     解释:框架譬如angular,是...

    用户1148399

扫码关注云+社区

领取腾讯云代金券