vue data是函数的原因:

1、防止data复用;

2、data独立性;

3、作用域;

4、js的特性。

总结来说,如果data是一个函数的话,这样每复用一次组件,就会返回一份新的data(类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据)。

1、防止data复用

vue中组件是用来复用的,为了防止data复用,将其定义为函数。

2、data独立性

vue组件中的data数据都应该是相互隔离,互不影响的,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组件内data数据被改变时,其他复用地方组件的data数据不受影响,就需要通过data函数返回一个对象作为组件的状态。

3、作用域

当我们将组件中的data写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的data,拥有自己的作用域,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。

4、js的特性

当我们组件的date单纯的写成对象形式,这些实例用的是同一个构造函数,由于JavaScript的特性所导致,所有的组件实例共用了一个data,就会造成一个变了全都会变的结果。

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必需是函数

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

  4. vue data不可以使用箭头函数的问题解析

    这篇文章主要介绍了vue data不可以使用箭头函数问题,本文通过源码解析给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 首先需要明确,a() {}和 b: () => {} ...

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

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

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

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

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

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

  8. Vue生命周期 钩子函数和组件传值

    Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...

  9. $.getJSON('url',function(data){}) 中回调函数不执行

    $.getJSON('url',function(data){}) 中回调函数不执行 url 中的 json 格式不正确 ,浏览器返回并没有报错 {'湖北':[114.11438,30.849429] ...

  10. vue & $data & data

    vue & $data & data vm.a === vm.$data.a https://vuejs.org/v2/api/#data https://flaviocopes.co ...

随机推荐

  1. 【SQL进阶】【REPLACE/TIMESTAMPDIFF/TRUNCATE】Day01:增删改操作

    一.插入记录 1.插入多条记录 自己的答案: INSERT INTO exam_record(uid, exam_id, start_time, submit_time, score) VALUES ...

  2. 【每日一题】【DFS&每个点都调用一次前后左右】由1连接的岛屿数量-211031/220216

    给你一个由 '1'(陆地)和 '0'(水)组成的的二维网格,请你计算网格中岛屿的数量. 岛屿总是被水包围,并且每座岛屿只能由水平方向和/或竖直方向上相邻的陆地连接形成. 此外,你可以假设该网格的四条边 ...

  3. Windows搭建Git服务器

    Windows如何搭建Git服务器 1.安装java环境 (1)下载安装java 注意(java的版本需要在1.7及以上) (2)配置java的环境变量 (3)检验java环境是否安装成功 2.下载安 ...

  4. DNS欺骗

    原理: dns欺骗又可以叫作中间人人攻击,主要是通过拦截受害人在访问某个网站时设备向外发送的dns请求,然后给出伪造的dns应答,实现欺骗过程. 实验脚本如下: from scapy.layers.d ...

  5. 【转载】github.com访问慢解决办法

    打开网站 IPAddress.com ,找到页面中下方的"IP Address Tools – Quick Links" 分别输入github.global.ssl.fastly. ...

  6. 深入理解 Linux 物理内存分配全链路实现

    前文回顾 在上篇文章 <深入理解 Linux 物理内存管理>中,笔者详细的为大家介绍了 Linux 内核如何对物理内存进行管理以及相关的一些内核数据结构. 在介绍物理内存管理之前,笔者先从 ...

  7. AtCoder Beginner Contest 285 解题报告

    AtCoder Beginner Contest 285 解题报告 \(\text{DaiRuiChen007}\) Contest Link A. Edge Checker 2 假设 \(a\ge ...

  8. 小项目中vuex使用频率不太多我们完全可以用provide inject 来代替可以让项目小不少

    在一般小型项目中vuex实在是太浪费了所以我们可以用到 vue中的provide inject 代替 1.在vue3中我们先另起一个 文件创建一个全局的状态和方法的地方(如果你的全局状态特别的多记得要 ...

  9. 最新版 Proteus 8.15 Professional 图文安装教程 [ 附安装包 ]

    前言 Proteus 是世界上唯一将电路仿真软件.PCB设计软件和虚拟模型仿真软件三合一的设计平台. Proteus 8.15 现已发布,本篇将带领大家安装此版本. 介绍 Proteus Proteu ...

  10. Java 进阶P-4.2+P-4.3

    继承 什么是继承:通俗易懂就好像是你继承你了爸的财产,其中你是子类,你爸是父类继承在Java中被称为面向对象的三大的特征,其中他表示的是,从已有的类中派生出新的类,新的类拥有了父类中属性和方法(pri ...