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. SpringCloudAlibaba入门之Sentinel(SCA)

    微服务保护和熔断降级技术Sentinel 1.微服务调用存在问题 由于一个服务不可用,有可能会导致一连串的微服务跟着不可用[服务器支持的线程和并发数有限,请求一直阻塞,会导 致服务器资源耗尽,从而导致 ...

  2. DRF JWT认证（二）

    快速上手JWT签发token和认证,有这一篇就够了,DRF自带的和自定义的都帮你总结好了,拿去用~

  3. partTwo自动出题程序第一阶段

    课堂测试1:像二柱子那样,花二十分钟写一个能自动生成30道小学四则运算题目的 "软件" 代码实现 import java.util.Random;//import java.uti ...

  4. Vue.js Mixins 混入使用

    Mixins一般有两种用途: 1.在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染. 2.很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重 ...

  5. K8S+Jenkins自动化构建微服务项目（后续）

    因为之前写过基于K8S部署jenkins master/slave平台,在这个的基础上构建微服务到K8S集群中 Jenkins-slave构建微服务项目到K8S集群 1.微服务项目上传到git仓库 这 ...

  6. 为何数据库连接池不采用IO多路复用？

      今天我们聊一个不常见的 Java 面试题:为什么数据库连接池不采用 IO 多路复用? 这是一个非常好的问题.IO多路复用被视为是非常好的性能助力器.但是一般我们在使用 DB 时,还是经常性采用c3 ...

  7. prometheus监控预警之AlertManager邮箱报警

    Alertmanager 主要用于接收 Prometheus 发送的告警信息,它支持丰富的告警通知渠道,例如邮件.微信.钉钉.Slack 等常用沟通工具,而且很容易做到告警信息进行去重,降噪,分组等, ...

  8. Istio实践（4）- 故障注入、熔断及ServiceEntry

    前言:接上一篇istio多服务应用部署及调用,本文介绍通过流量管理(故障注入.请求超时等)以及ServiceEntry外部服务部署应用 1.设置服务延迟 修改springbootapp-vs-v1.y ...

  9. 封闭的一个多月，老菜鸟的 机械手和AGV 自动搬运小项目总结

    最近上海疫情严重,闲赋在家无事可做,手机里不断的推送一些无脑的谩骂声音,索性找点事情做,将3月份实施的一个自动搬运小项目做一个简单的汇总,便于今后项目实施中积累一些经验.项目需求非常简单,因为能力有限 ...

  10. Solon 1.7 重要发布，更现代感的应用开发框架

    相对于 Spring Boot 和 Spring Cloud 的项目 启动快 5 - 10 倍 qps 高 2- 3 倍 运行时内存节省 1/3 ~ 1/2 打包可以缩小到 1/2 ~ 1/10(比如 ...