组件中 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 ...
随机推荐
- WEB服务与NGINX(6)-location使用详解
目录 1. location的详细用法 1.1 精确匹配 1.2 区分大小写 1.3 不区分大小写 1.4 匹配URI开始 1.5 测试location的优先级 1.6 location的生产使用示例 ...
- Java IO流文件
Java IO流文件 创建文件 使用File类进行创建文件操作,创建该对象包含三种构造方法 new File(String pathname); //根据路径+文件名创建一个File对象 new Fi ...
- js数组方法之数组变异方法
push.pop.unshift.shift.sort.splice.reverse 以上这些方法都会改变原数组并且 这些方法的返回值是值得注意的有时候可以提高工作效率,比如pop方法的返回值是该元素 ...
- Splashtop远程桌面再次增强:支持4K视频流
远程桌面工具,主流的有10款总有,国内用的比较多的有teamviewer.Splashtop.向日葵等.几款软件各有千秋,其中Splashtop最大的特性就是快速.流畅.产品无敌,运营佛系,哈哈.下面 ...
- MySQL日志文件简记
日志文件 binlog binlog主要记录了MySQL数据库执行了更改的所有操作,主要用来做主从复制,数据恢复 记录模式: Statement模式:每一条回修改数据的sql都会被记录在日志中 Row ...
- redis 的下载与安装
下载地址:https://github.com/MicrosoftArchive/redis/releases 选择免安装包: 解压到路径 D:\Redis-x64-3.0.504 用管理员权限打开 ...
- 前端使用 Konva 实现可视化设计器(12)- 连接线 - 直线
这一章实现的连接线,目前仅支持直线连接,为了能够不影响原有的其它功能,尝试了2.3个实现思路,最终实测这个实现方式目前来说最为合适了. 请大家动动小手,给我一个免费的 Star 吧~ 大家如果发现了 ...
- tab切换中嵌套swiper轮播
今天在做官网的时候需要用到swiper多图轮播的功能,但是得嵌套在tab切换中,就在我把砖都搬完后,发现了个问题,就是我在进行tab切换后,发现原本设置的swiper的自动轮播竟然失效了,而且样式也是 ...
- win10离线安装.net3.5失败的解决方案
简介: 问题:有时候需要离线安装.net3.5环境,网上的教程一般都是通过NetFx3.cab进行离线安装,但有时候会出现离线安装失败,比如: by~MaQaQ 2024-06-04 分析: 1.先关 ...
- swap文件修复
修复swap文件 vim -r /aaaa.swap