朋友,当你提出以上问题的时候建议你先去复习下原型链的知识

但是我好人做到底直接就讲了吧,我们先看一下下面的这段代码:

  1. function Component () {
  2. this.data = this.data
  3. }
  4. Component.prototype.data = {
  5. name: '卡莲'
  6. gender: '女'
  7. }

  以后再放链接:

我们来分析一下假如是以下这种情况:

  1. function Component(){
  2.  
  3. }
  4. Component.prototype.data = {
  5. name:'卡莲',
  6. gender: '女'
  7. }
  8. var componentA = new Component();
  9. var componentB = new Component();
  10. componentA.data.gender="男";
  11. console.log(componentA,componentB)

  说好只改变其中一个卡莲的性别,但是卡莲们不分彼此,公用一个接受信号的大脑,同时接收到了变成“男”的信号,结果他们都变成了“男”。

所以Vue需要function的帮助,每次都可以new出独立思考的,拥有独立大脑的卡莲,这次我们再尝试再发出一次信号:

  1. function Component(){
  2.  
  3. }
  4. Component.prototype.data = function () {
  5. name:'卡莲',
  6. gender: '女'
  7. }
  8. var componentA = new Component();
  9. var componentB = new Component();
  10. componentA.data.gender="男";
  11. console.log(componentA,componentB)

  太好了,舰长大人,卡莲A是男,卡莲B是女,我们成功了。

【Vue】淘气三千问之 data为什么是函数而不是对象?这河狸吗的更多相关文章

  1. Vue 数组封装和组件data定义为函数一些猜测

     数组封装 var vm={ list:[0,1] } var push=vm.list.push;//把数组原来的方法存起来 vm.list.push=function(arg){//重新定义数组的 ...

  2. Vue.js 一问一答

    Vue.js 一问一答 记录一下在学习 Vue 过程中给自己问的一些问题,持续更新中... Vue.js 的核心是什么? 官网:Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 ...

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

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

  4. Vue 组件 data为什么是函数?

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

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

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

  6. Vue 在beaforeCreate时获取data中的数据

    众所周知,vue在beforecreate时期是获取不到data中的 数据的 但是通过一些方法可以实现在beforecreate时获取到data中的数据 暂时想到两种放发可以实现,vue在before ...

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

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

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

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

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

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

随机推荐

  1. flutter查看安全码SHA1

    最近flutter技术调研高德地图插件时,要用到安全码,可以打开cmd,键入一下命令查看.(注意路径用户名yourusernamehere改为自己的) keytool -list -v -keysto ...

  2. ManagementEventWatcher throws ManagementException with call to Stop()

    参考网址:https://stackoverflow.com/questions/46100105/managementeventwatcher-throws-managementexception- ...

  3. QT 中的QTableWidget

  4. input text 只能输入数字 js 正则表达式

    $("#txt1").keyup(function () { $(this).val($(this).val().replace(/[^0-9.]/g, '')); }).bind ...

  5. Spring第一课:配置文件及IOC引入(一)

    Spring最核心的特点就是控制反转:(IOC)和面向切面(AOP) 首先作为一个Spring的项目需要导入的四个核心包,一个依赖: 四核心:core.context.beans.expression ...

  6. Linux centos 安装 jenkins & 本地构建jar & 远程构建jar

    一.部署 jenkins 需要的前奏 1.安装 JDK:https://www.cnblogs.com/chuyi-/p/10644440.html 2.安装tomcat:https://www.cn ...

  7. 【Tools】Anaconda Operaction

    专为数据科学和机器学习工作流程而设计,是一个开源包管理器,环境管理器,以及Python和R编程语言的分发.它通常用于大规模数据处理,科学计算和预测分析.pip install xxx ,在特定环境里使 ...

  8. 学习小记: Kaggle Learn - Machine Learning Explainability

    Method Feature(s) Sample(s) Result Value/Feature Permutation Importance 1 all validation samples Sin ...

  9. Spring系列之JDBC对不同数据库异常如何抽象的?

    前言 使用Spring-Jdbc的情况下,在有些场景中,我们需要根据数据库报的异常类型的不同,来编写我们的业务代码.比如说,我们有这样一段逻辑,如果我们新插入的记录,存在唯一约束冲突,就会返回给客户端 ...

  10. ubantu虚拟机搭建xl2tp服务

    在编译成功源码,安装完毕xl2tpd后,便可以配置xl2tpd服务.基本配置过程主要涉及两个配置文件:一个用来配置xl2tpd, 一个用来配置ppp协议.下面分别对这两个文件进行说明,最后添加xl2t ...