组件中 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 ...
随机推荐
- kettle使用4-使用Pan.bat执行转换、Kitchen.bat执行作业
一.直接在spoon中执行作业 使用bat文件执行速度比执行在spoon.bat中执行慢很多,如果少数几个任务,可以直接在spoon中执行. 1.新建作业 2.在通用中,新建START 任务执行的时间 ...
- 推荐几款火爆的Python在线编辑器
在当今数字化时代,编程已成为一项不可或缺的技能.Python作为一种简单易学且功能强大的编程语言,受到了广大编程爱好者和专业开发人员的青睐.为了方便大家随时随地编写和运行Python代码,市面上涌现了 ...
- AIRIOT物联网低代码平台如何配置OPC UA驱动?
AIRIOT物联网低代码平台支持驱动类型丰富,驱动包括但不限于通用驱动信息,无线驱动信息,行业驱动信息及各个厂商驱动.驱动稳定性强,经受住各个大型项目考验,持续稳定运行. AIRIOT物联网低代码平台 ...
- prometheus使用4
安装pushgateway 下载地址: https://github.com/prometheus/pushgateway/releases 下载这个 [root@mcw04 ~]# tar xf p ...
- VS Code 代码片段编写教程
VS Code 代码片段编写教程 最近要做一个vs code的代码片段插件,于是搜索和学习相关内容,整理分享给大家! [!TIP] 本篇博客50%+内容由BingChat提供,然后作者对内容进行验证和 ...
- sass变量的详细使用
sass变量同javascript变量,可以用来存储一些信息,并且可以重复使用. 先来对比一下css中的变量 同css变量对比 CSS 变量是由 CSS 作者定义的,它包含的值可以在整个文档或指定的范 ...
- 解决”将公司Linux服务器上的脚本导出到windows上打开串行的“问题
目录 一.前期准备 二.回车转换 一.前期准备 1.在linux服务器上写一个简单的脚本. [root@node5 ~]# vim linux脚本.sh [root@node5 ~]# cat lin ...
- 基于 ESP8266_RTOS_SDK 实现声控灯
#include <stdio.h> #include <string.h> #include <stdlib.h> #include <stdint.h&g ...
- Swoole 源码分析之 WebSocket 模块
首发原文链接:Swoole 源码分析之 WebSocket 模块 大家好,我是码农先森. Swoole 源码分析之 WebSocket 模块 引言 WebSocket 是一种在单个 TCP 连接上进行 ...
- linux扩展分区
linux扩展分区 1.准备工作 系统版本:ubuntu20.04 工具:一个安装了ubuntu系统的系统U盘或者ubuntu系统制作的启动盘 2.缩小分区 要扩展某一个分区,再没有空闲空间时需要从其 ...