组件中的data为什么不是一个对象而是一个函数?
组件中的data为什么不是一个对象而是一个函数?
组件是可复用的vue
实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data
数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data
数据就应该被复制一次,之后,当某一处复用的地方组件内data
数据被改变时,其他复用地方组件的data
数据不受影响。
组件中的data
写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data
,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data
,就会造成一个变了全都会变的结果。
组件中的data为什么不是一个对象而是一个函数?的更多相关文章
- Vue系列之 => 组件中的data和methods
使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数
1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...
- vue组件中的data与methods
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...
- 15.Vue组件中的data
1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...
- 黑马vue---59-60、组件中的data和methods
黑马vue---59-60.组件中的data和methods 一.总结 一句话总结: 1. 组件可以有自己的 data 数据 2. 组件的 data 和 实例的 data 有点不一样,实例中的 dat ...
- 第六章 组件 56 组件-组件中的data
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- vue-为什么子组件中的data选项必须是函数?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 组件中的data数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue组件中的data为什么是函数?
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
- 为什么vue组件中的data不是一个对象而是一个函数
如果两个实例引用同一个对象,当其中一个实例的属性发生改变时,另一个实例属性也随之改变,只有当两个实例拥有自己的作用域时,才不会相互干扰. 这是因为JavaScript的特性所导致,在component ...
随机推荐
- 线程基础知识06 synchronized---使用javap查看相关指令
1 示例-简单同步代码块 public class SychTest9 { public static void main(String[] args) { Object o = new Object ...
- 基于二叉树的高效IP检索格式MMDB
一.MMDB简介 MMDB(MaxMind Database) 是MaxMind推出的一个数据存储和检索的数据库格式,用于旗下针对IP检索和存储的Geo产品. IP格式由二进制比特数组组成,很容易想到 ...
- EL&JSTL笔记 javaweb+jdbcTempl
# 今日内容 1. JSP: 1. 指令 2. 注释 3. 内置对象 2. MVC开发模式 3. EL表达式 4. JSTL标签 ...
- BAL数据集详解
详细格式:https://grail.cs.washington.edu/projects/bal/ Bundle Adjustment in the Large Recent work in Str ...
- Spring事务(Transaction)管理高级篇一栈式解决开发中遇到的事务问题
Spring是目前Java开发中最流行的框架了,它的事务管理我们在开发中常常的用到,但是很多人不理解它事务的原理,导致开发中遇到事务方面的问题往往都要用很长的时间才能解决,下面就带着大家去深入了解Sp ...
- nginx编译安装以及常用参数详解
1 基于ansible role实现编译安装nginx 利用ansible控制端10.0.0.8机器,在被控制端10.0.0.18上部署nginx 首先打通ansible控制端与被控制端的基于key验 ...
- 解决MSsql 中文变成"?"的问题
ALTER DATABASE IMStest SET SINGLE_USER WITH ROLLBACK IMMEDIATE; ALTER database IMStest collate Chine ...
- 禁用a标签点击事件
a标签是没有disable属性的 ,如果想用disable 禁用a标签的点击事件,也可以实现: 1.a标签要用disable属性,必须和pointer-events属性一起使用, html代码: &l ...
- wordpress宕机原因及处理方法
2020年7月底,查看了网站日志,是wp-cron.php 导致异常. 原来这是WordPress定时任务,禁用即可. 在wp-config.php添加 /* 禁用定时任务 wp-cron */ de ...
- c# RegistryKey 的相关简单操作(转)
c# RegistryKey 的相关简单操作 以下从'读''写''删除''判断'四个事例实现对注册表的简单操作 1.读取指定名称的注册表的值 private string GetRegistDat ...