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

这是因为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. SQL中常用的字符串REVERSE函数和SUBSTRING函数详解!

    今天继续整理日常可能经常遇到的一些处理字符串的函数,记得点赞收藏!以备不时之需! REVERSE(expression)函数解析:SQL Server中的此函数用于反转(颠倒)指定的字符串,也就是说把 ...

  2. three.js教程3-模型对象、材质material

    1.Object3D的position和scale是三维向量Vector3 因此模型的位置和缩放等变化,也是使用Vector3的属性和方法实现,查询文档Vector3. 三维向量Vector3有xyz ...

  3. 前端JavaScript开发风格规范

    开发者需要建立和遵守的规范 大致可以划分成这几个方向: 开发流程规范 代码规范 git commit规范 项目文件结构规范 UI设计规范 1. 开发流程规范 这里可能有小伙伴有疑问了,开发流程规范不是 ...

  4. IDEA文件夹注释插件TreeInfotip使用

    目录 前景提要 环境整合 构建工具(参考工具部署方式) 下载插件 使用 前景提要 很多开源代码或者公司代码,因为层级比较多,所以查阅困难,发现一个TreeInfotip插件可以对这样的文件做注释 环境 ...

  5. tar和zip包加密解密压缩

    1.概述 嗯,最近有些机密文件无处安放,因为太机密了,后来确定加密后放到服务器上.研究一番后发现tar和zip命令都能实现,所以在此记录一下. 压缩:tar -zcvf - ./packageTest ...

  6. Spring 面向切面编程AOP 详细讲解

    1. Spring 面向切面编程AOP 详细讲解 @ 目录 1. Spring 面向切面编程AOP 详细讲解 每博一文案 2. AOP介绍说明 2.1 AOP的七大术语 2.2 AOP 当中的 切点表 ...

  7. WPF绑定数据源到ListBox等selector的注意事项

    如果使用CollectionViewSource绑定到控件上,会导致默认选择第一项,而使用List,SelectedItem就默认为空. 要避免默认选择第一项,就要设置 ListBox.IsSynch ...

  8. MySQL慢查询及优化

    最近做一个CRM系统,发现了慢查询日志里记载了许多的慢sql,于是就对其进行了sql优化.在优化的过程中,自己也归纳整理了一些sql优化的方案.今天就来和大家聊聊. **1.慢查询的分析** 常见的分 ...

  9. 解决input中输入中文过程中会触发input事件的问题

    问题描述: 监听文本输入框的input事件,在拼写汉字时会触发input事件,如下图: 需求: 选词完成后触发input事件,只触发一次. 解决办法: 通过查阅资料得知在输入中文(包括语音识别时)会先 ...

  10. ModelScope初体验

    使用环境:windows 11 前置条件:已安装 anaconda 参考文档:环境安装 step1:新建一个 conda 环境,命名为 modelscope conda create -n model ...