组件中的data为什么不是一个对象而是一个函数?

组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响。

组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。

 
 

组件中的data为什么不是一个对象而是一个函数?的更多相关文章

  1. Vue系列之 => 组件中的data和methods

    使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数

    1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...

  3. vue组件中的data与methods

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...

  4. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  5. 黑马vue---59-60、组件中的data和methods

    黑马vue---59-60.组件中的data和methods 一.总结 一句话总结: 1. 组件可以有自己的 data 数据 2. 组件的 data 和 实例的 data 有点不一样,实例中的 dat ...

  6. 第六章 组件 56 组件-组件中的data

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. vue-为什么子组件中的data选项必须是函数?

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Vue 组件中的data数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. vue组件中的data为什么是函数?

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

  10. 为什么vue组件中的data不是一个对象而是一个函数

    如果两个实例引用同一个对象,当其中一个实例的属性发生改变时,另一个实例属性也随之改变,只有当两个实例拥有自己的作用域时,才不会相互干扰. 这是因为JavaScript的特性所导致,在component ...

随机推荐

  1. 线程基础知识06 synchronized---使用javap查看相关指令

    1 示例-简单同步代码块 public class SychTest9 { public static void main(String[] args) { Object o = new Object ...

  2. 基于二叉树的高效IP检索格式MMDB

    一.MMDB简介 MMDB(MaxMind Database) 是MaxMind推出的一个数据存储和检索的数据库格式,用于旗下针对IP检索和存储的Geo产品. IP格式由二进制比特数组组成,很容易想到 ...

  3. EL&JSTL笔记 javaweb+jdbcTempl

    # 今日内容    1. JSP:        1. 指令        2. 注释        3. 内置对象    2. MVC开发模式    3. EL表达式    4. JSTL标签   ...

  4. BAL数据集详解

    详细格式:https://grail.cs.washington.edu/projects/bal/ Bundle Adjustment in the Large Recent work in Str ...

  5. Spring事务(Transaction)管理高级篇一栈式解决开发中遇到的事务问题

    Spring是目前Java开发中最流行的框架了,它的事务管理我们在开发中常常的用到,但是很多人不理解它事务的原理,导致开发中遇到事务方面的问题往往都要用很长的时间才能解决,下面就带着大家去深入了解Sp ...

  6. nginx编译安装以及常用参数详解

    1 基于ansible role实现编译安装nginx 利用ansible控制端10.0.0.8机器,在被控制端10.0.0.18上部署nginx 首先打通ansible控制端与被控制端的基于key验 ...

  7. 解决MSsql 中文变成"?"的问题

    ALTER DATABASE IMStest SET SINGLE_USER WITH ROLLBACK IMMEDIATE; ALTER database IMStest collate Chine ...

  8. 禁用a标签点击事件

    a标签是没有disable属性的 ,如果想用disable 禁用a标签的点击事件,也可以实现: 1.a标签要用disable属性,必须和pointer-events属性一起使用, html代码: &l ...

  9. wordpress宕机原因及处理方法

    2020年7月底,查看了网站日志,是wp-cron.php 导致异常. 原来这是WordPress定时任务,禁用即可. 在wp-config.php添加 /* 禁用定时任务 wp-cron */ de ...

  10. c# RegistryKey 的相关简单操作(转)

    c# RegistryKey 的相关简单操作   以下从'读''写''删除''判断'四个事例实现对注册表的简单操作 1.读取指定名称的注册表的值 private string GetRegistDat ...