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

这是因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象

组件中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。

而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。

例子:

  function Box(){

          }
Box.prototype.data={
msg:"aaa"
};

var b1=new Box();
var b2=new Box();
b1.data.msg="bbb";//--------------这里修改一个实例的属性,会造成另一个实例的属性也跟着修改了
console.log(b1.data.msg);//------bbb
console.log(b2.data.msg);//------bbb
 function Box(){
this.data=this.data();
}
Box.prototype.data=function(){
return{
msg:"aaa"
}
};
var b1=new Box();
var b2=new Box();
b1.data.msg="bbb";//-----------------如果是函数的形式去定义的属性,这样它们有自己的作用域,在修改的时候不会影响到别人
console.log(b1.data.msg);//----bbb
console.log(b2.data.msg);//----aaa

组件中 data 为什么是一个函数?的更多相关文章

  1. vue中data必须是一个函数

    前端面试时经常被问到:“组建中data为什么是函数”? 答案就是:在组件中data必须是一个函数,这样的话,每个实例可以维护一份被返回对象的独立拷贝.

  2. vue中组件的data为什么是一个函数

    1. 前言 在学习vue的时候,一直纳闷一件事:组件的data数据为什么必须要以函数返回的形式,为什么不是简单的对象形式呢?遂带着问题去翻官方文档,文档中自然也写明了这么做的原因,本篇博文以官方文档给 ...

  3. Vue 组件中 data 为什么必须是函数

    原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...

  4. [Vue]组件——组件的data 必须是一个函数

    普通的Vue实例data是一个对象: data: { count: 0 } 组件的data是一个方法: data: function () { return { count: 0 } } 详情见官网: ...

  5. Vue之vue中的data为什么是一个函数+vue中路径别名alias设置

    问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...

  6. Vue.js 组件中data的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 039——VUE中组件之子组件中data使用实例与text-xtemplate的使用方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue组件中data为什么必须是一个函数?

    因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象. 组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一 ...

  9. vue组件中data为什么必须是个函数

    <body> <div id="app"> <counter></counter> </div> <templat ...

  10. 【Vue】定义组件 data 必须是一个函数返回的对象

    Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化.对象必须是纯粹的对象 (含有零个或多个的 key/value ...

随机推荐

  1. uniapp底层跨端原理

    uniapp底层跨端原理 - 代码编写:开发者使用Vue.js框架编写uniapp的代码,包括页面结构.样式和逻辑等. - 编译过程:在编译过程中,uniapp会将Vue.js的代码转换为各个平台所需 ...

  2. vue2遇到的一些错误

    一.VUE中的VUEX如何调用modules里面的mutations和state   ...mapMutations("workflow",['setApproverConfig' ...

  3. 一个 .NET 开源的地图组件库 - Mapsui

    前言 今天大姚给大家分享一个.NET开源(MIT License).免费.同时支持多平台框架(MAUI.WPF.Avalonia.Uno.Blazor.WinUI.Eto..NET Android 和 ...

  4. opensuse tw快速部署

    使用GUI快速配置opensusetw 先看官方配置指南 换源 清华源之oss+non-oss links 清华源之packman links sudo zypper ar -cfg 'https:/ ...

  5. 椭圆曲线密码学(ECC)加解密,附带python代码

    想起来很久没写博客了,刚好今天要写实验报告,随便把之前的也完成吧 1.椭圆曲线概念 椭圆曲线在经过化解后,可以用这条式子表达:E:y²=x³+ax+b 其背后的密码学原理,是基于椭圆曲线离散对数问题, ...

  6. uniapp 小程序分享功能

    上个月在做小程序的项目时,甲方需要给小程序添加个分享的功能,查看uniapp官方文档后,发现uniapp有自带的小程序分享功能(https://uniapp.dcloud.io/api/plugins ...

  7. 初识c语言—c语言的初步认识和一个简单的程序

    C语言是什么 编程语言(编程语言是控制计算机的一系列指令,他又固定的格式和词汇.同时也叫计算机语言(计算机语言是,人和计算机通讯的语言)) C语言的特点 语言简洁,紧凑,使用方便 运算符丰富 数据类型 ...

  8. .NET 中使用 OpenTelemetry Traces 追踪应用程序

    上一次我们讲了 OpenTelemetry Logs.今天继续来说说 OpenTelemetry Traces. 在今天的微服务和云原生环境中,理解和监控系统的行为变得越来越重要.在当下我们实现一个功 ...

  9. 使用Wesky.Net.Opentools库,一行代码实现自动解析实体类summary注释信息(可用于数据实体文档的快速实现)

    使用前,需要对你的项目勾选输出api文档文件. 引用Wesky.Net.OpenTools包,保持1.0.11版本或以上.   为了方便,我直接在昨天的演示基础上,继续给实体类添加注释. 昨天的演示文 ...

  10. ETL工具-nifi干货系列 第十四讲 nifi处理器PublishKafka实战教程

    1.kettle的kafka生产者叫kafka producer,nifi中的相应处理器为PublishKafka,如下图所示: 可以很清楚的看到PublishKafka处理器支持多个版本的kafka ...