因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。
　　组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。

vue组件中data为什么必须是一个函数？的更多相关文章

  1. vue组件中data为什么必须是个函数

    <body> <div id="app"> <counter></counter> </div> <templat ...

  2. Vue 组件中 data 为什么必须是函数

    原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...

  3. vue组件中data是个函数

    当我们const vm = new Vue({ el : '#app',   data : { msg:‘hello World’ } })用习惯了,data是一个对象,可到了vue组件 Vue.co ...

  4. 怎样理解 Vue 组件中 data 必须为函数 ?

    组件意在 复用 , 若为 对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下 对象 // 模拟创建组件 var Component= function() { ...

  5. Vue组件里面data为什么必须是个函数

    在创建或注册模板的时候,传入一个data属性用来绑定数据,但是在组件中,data必须是一个函数,而不能直接把对象赋值给它. export default { name:'app', data(){ r ...

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

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

  7. vue组件中的data与methods

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

  8. 15.Vue组件中的data

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

  9. 黑马vue---61、为什么vue组件的data要是一个函数

    黑马vue---61.为什么vue组件的data要是一个函数 一.总结 一句话总结: 因为js中以函数为变量作用域,所以这样可以保证每个组件的数据不互相影响 二.why components data ...

随机推荐

  1. Abp小试牛刀之 图片上传

    图片上传是很常见的功能,里面有些固定的操作也可以沉淀下来. 本文记录使用Abp vNext做图片上传的姿势. 本文的技术核心与Abp无关,Abp只是手段! 目标 上传图片----->预览图片-- ...

  2. Mybatis 动态sql if 判读条件等于一个数字

    在Mybatis中 mapper中 boolean updateRegisterCompanyFlag(@Param(value = "companyId") String com ...

  3. R绘图(1): 在散点图边缘加上直方图/密度图/箱型图

    当我们在绘制散点图的时候,可能会遇到点特别多的情况,这时点与点之间过度重合,影响我们对图的认知.为了更好地反映特征,我们可以加上点的密度信息,比如在原来散点所在的位置将密度用热图的形式呈现出来,再比如 ...

  4. 进制及其字符串之间互转——C#

    本文介绍进制数转进制数,及每个进制对应的字符串 一.首先进制数转进制数(int-->int) 1.二进制数与十进制数互转: (1)二进制数转十进制数:还没找到 (2)十进制数转二进制数:目前还没 ...

  5. Spring--AOP、通知的执行顺序

    AOP执行顺序 如果我们在同一个方法自定义多个AOP,我们如何指定他们的执行顺序呢? 可以通过指定order,order越小越是最先执行. 配置AOP执行顺序的三种方式: 通过实现Ordered接口 ...

  6. sql查询速度慢分析及如何优化查询

    原因分析后台数据库中数据过多,未做数据优化数据请求-解析-展示处理不当 网络问题提高数据库查询的速度方案SQL 查询速度慢的原因有很多,常见的有以下几种:1.没有索引或者没有用到索引(查询慢最常见的问 ...

  7. 【Flutter】布局类组件之对齐和相对定位

    前言 如果只想简单的调整一个子元素在父元素中的位置的话,使用Align组件会更简单一些. 接口描述 const Align({ Key key, // 需要一个AlignmentGeometry类型的 ...

  8. Python作业---内置数据类型

    实验2 内置数据类型 实验性质:验证性 一.实验目的 1.掌握内置函数.列表.切片.元组的基本操作: 2.掌握字典.集合和列表表达式的基本操作. 二.实验预备知识 1.掌握Python内置函数的基/本 ...

  9. 实现一个简单的 Linux Shell（C++）

    Implement a simple command interpreter in Linux. The interpreter should: support both internal and e ...

  10. netstat -an|awk '/^tcp/ {++s[$NF]} END {for( a in s) {print a,s[a]}}'

    监控tcp连接情况 netstat  -an|awk '/^tcp/ {++s[$NF]} END {for( a in s) {print  a,s[a]}}'