组件中 data 为什么是一个函数?
如果两个实例引用同一个对象,当其中一个实例的属性发生改变时,另一个实例属性也随之改变,对象没有自己的作用域,只有当两个实例拥有自己的作用域时,才不会相互干扰。
这是因为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 为什么是一个函数?的更多相关文章
- vue中data必须是一个函数
前端面试时经常被问到:“组建中data为什么是函数”? 答案就是:在组件中data必须是一个函数,这样的话,每个实例可以维护一份被返回对象的独立拷贝.
- vue中组件的data为什么是一个函数
1. 前言 在学习vue的时候,一直纳闷一件事:组件的data数据为什么必须要以函数返回的形式,为什么不是简单的对象形式呢?遂带着问题去翻官方文档,文档中自然也写明了这么做的原因,本篇博文以官方文档给 ...
- Vue 组件中 data 为什么必须是函数
原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...
- [Vue]组件——组件的data 必须是一个函数
普通的Vue实例data是一个对象: data: { count: 0 } 组件的data是一个方法: data: function () { return { count: 0 } } 详情见官网: ...
- Vue之vue中的data为什么是一个函数+vue中路径别名alias设置
问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...
- Vue.js 组件中data的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 039——VUE中组件之子组件中data使用实例与text-xtemplate的使用方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue组件中data为什么必须是一个函数?
因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象. 组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一 ...
- vue组件中data为什么必须是个函数
<body> <div id="app"> <counter></counter> </div> <templat ...
- 【Vue】定义组件 data 必须是一个函数返回的对象
Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化.对象必须是纯粹的对象 (含有零个或多个的 key/value ...
随机推荐
- C#/.NET/.NET Core优秀项目和框架2024年4月简报
前言 公众号每月定期推广和分享的C#/.NET/.NET Core优秀项目和框架(每周至少会推荐两个优秀的项目和框架当然节假日除外),公众号推文中有项目和框架的介绍.功能特点.使用方式以及部分功能截图 ...
- leaflet 根据一个经纬度及距离角度,算出另外一个经纬度
/** * 根据一个经纬度及距离角度,算出另外一个经纬度 * @param {*} lng 经度 113.3960698 * @param {*} lat 纬度 22.941386 * @param ...
- Django 自定义管理命令:从入门到高级
title: Django 自定义管理命令:从入门到高级 date: 2024/5/16 18:34:29 updated: 2024/5/16 18:34:29 categories: 后端开发 t ...
- 各大插件市场智能助手评分榜出炉!百度Comate稳居第一
近日,在VSCode.Jetbrains等各大插件市场智能助手评分榜中,百度Comate分别以4.5和4.4位列第一,通义灵码位居第二.第三,CodeGeeX.iFlyCode.aiXcoder.Gi ...
- selenium遇到手机验证码怎么解决
完整代码在: selenium使用案例 解决思路,点击发送送验证码,程序用input方法去和人进行交互,手动输入验证码,按回车键,这样程序就接收到手机验证码了,再把验证码赋值给验证码框,继续往下操作 ...
- .NET 中的表达式树
.NET 中的表达式树(Expression Trees) 表达式树是什么? 表达式树(Expression Trees)是.NET框架中的一个强大功能,它将代码表示为一个由表达式节点组成的树形结构. ...
- C# winform GDI+ 五子棋 (二):根据博弈算法写的人机AI(抄的别人的)
白棋是ai,最后ai走赢了. 根据博弈算法的一个AI.遍历深度6层,下子很慢.其实我是从别人的代码里复制的算法,改到自己上面用了. 这个博弈算法 class GameAI { /// <summ ...
- Vue cli路由
上面是将Forecast组件作为了Home的子组件使用,现在我们将其作为一个路由组件使用. 在router/index.js路由系统注册路由: { path: '/forecast', name: ' ...
- ETL工具-nifi干货系列 第一讲 揭开nifi神秘面纱
1.nifi简介 Apache NiFi 是基于流程编程概念的数据流系统.它支持强大且可扩展的数据路由.转换和系统中介逻辑的有向图.NiFi具有基于Web的用户界面,用于设计.控制.反馈和监控数据流. ...
- C#.NET BC BouncyCastle 国密 SM2 解密遇到 Invalid point encoding 77
C#.NET BC BouncyCastle 国密 SM2 解密遇到 Invalid point encoding 77 参考:https://blog.csdn.net/seeyouagen/art ...