vue组件data通常定义为一个函数并return一个对象，对象中定义的就是组件数据，当然定义数据还有props、computed等方式。

data如果直接定义为对象data: {message: ''}或者data定义为函数且return同一个对象

因为对象为引用类型，如果组件被多次复用，则复用组件data都指向同一个内存地址，组件间数据就会存在相互影响问题，改变其中一个，另外的也会改变。

可以借鉴js原型链、通过原型链实例化对象的概念做理解。

JavaScript函数作用域使每个组件数据相互独立，不会相互影响，当组件实例化时，data声明为函数并显式return一个对象。

而在new Vue({})中data可以是个对象

区分组件和实例的概念，组件是可复用的单元，注册组件不会产生新的组件类，产生的是一个可以用来实例化的类，当使用组件时才将组件实例化。

当我们把data改为对象，vue会报错

分析vue源码，找到报错位置

这个函数用来处理组件的data选项，可以看出组件与实例vm会进不同的判断，组件就会判断data是否为函数，然后执行options的合并

vue组件data函数的更多相关文章

  1. Vue 组件 data为什么是函数？

    在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...

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

    在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...

  3. Vue组件中的Data为什么是函数。

    简单点说,组件是要复用的,在很多地方都会调用.   如果data不是函数,而是属性,就又可能会发生多个地方的相同组件操作同一个Data属性,导致数据混乱. 而如果是函数,因为组件data函数的返回值是 ...

  4. 构建前端第12篇之---在Vue中对组件,变量,函数的全局引入

    张燕涛写于2020-01-16 星期two 本篇还是源于import和export的使用,昨天看es6入门 和MDN文档,大体上用法了解了,但今天看ElementUI源码的时候,看到 //src/in ...

  5. vue组件详解（二）——使用props传递数据

    在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 props 给子组件下发数据,子组件通过事件给父组件发送消息.看看它们是怎么工作的.  一.基本用法 组件不仅仅 ...

  6. vue组件详解——使用props传递数据

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 ...

  7. VUE组件 单独文件封装

    https://www.cnblogs.com/SamWeb/p/6391373.html vuejs 单文件组件.vue 文件   vuejs 自定义了一种.vue文件,可以把html, css, ...

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

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

  9. 【Vue】定义组件 data 必须是一个函数返回的对象

    Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化.对象必须是纯粹的对象 (含有零个或多个的 key/value ...

随机推荐

  1. python版本共存与语法的注释

    python的多种版本共存 首先还是先下载python解释器除最高版本的另外两个版本 个人推荐的是 3.6.8和2.7.14 首先我电脑是win7系统 在计算机属性右键点开高级设置点击环境变量 将下载 ...

  2. 在边缘计算场景中使用Dapr

    Dapr 是分布式应用程序可移植.事件驱动的运行时, 这里有几个关键字,我们拆开来看一下: 分布式: 代表共享或是分散,在云原生应用上体现为微服务,在边缘计算场景中代表分散的模块,可以做积木式拼接. ...

  3. Visual Studio2019 F5调试程序时选择文件后调试控制台进程关闭问题

    问题:Visual Studio2019 F5调试程序时选择文件后调试控制台进程关闭问题 解决方案: 修改Visual Studio 配置项 [工具]-[选项]-[项目和解决方案]-[Web项目]-[ ...

  4. UnrealEngine创建自定义资产类型

    导语 这篇文章记录了将UObject实例保存在Asset文件的方法,用这个方法可以将自定义的UObject数据序列化保存到文件,可以用于自定义UE资源类型. 创建UObject类 这一步比较简单,按照 ...

  5. Water 2.6.1 发布，一站式服务治理平台

    Water(水孕育万物...) Water 为项目开发.服务治理,提供一站式解决方案(可以理解为微服务架构支持套件).基于 Solon 框架开发,并支持完整的 Solon Cloud 规范:已在生产环 ...

  6. k8s入门之namespace(三)

    namespace的作用就是用来隔离资源,将同一集群中的资源划分为相互隔离的组.同一名称空间内的资源名称要唯一,但不同名称空间时没有这个要求.有些k8s资源对象与名称空间没有关系,例如 Storage ...

  7. Apache Hudi 如何加速传统的批处理模式？

    1. 现状说明 1.1 数据湖摄取和计算过程 - 处理更新 在我们的用例中1-10% 是对历史记录的更新.当记录更新时,我们需要从之前的 updated_date 分区中删除之前的条目,并将条目添加到 ...

  8. python学习-Day32

    目录 今日内容详细 软件开发架构 概念 软件开发架构的分类 C/S架构 B/S架构 两种架构的优缺点 C/S架构: B/S架构: tip 网络编程 概念 互联网 互联网协议 OSI七层协议简介 专业设 ...

  9. python学习-Day9

    目录 记忆不清点回顾 今日概要 今日内容 大作业讲解 字符编码实际应用 编码与解码 如何解决乱码的问题 文件操作简介 什么是文件 代码操作文件 代码操作文件的流程 基本语法结构 使用关键字打开文件 w ...

  10. Kafka Kerberos 安全认证

    本主要介绍在 Kafka 中如何配置 Kerberos 认证,文中所使用到的软件版本:Java 1.8.0_261.Kafka_2.12-2.6.0.Kerberos 1.15.1. 1. Kerbe ...