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. C++编程笔记(通信)(win32平台)

    目录 一.初始化网络库 二.socket套接字 2.1服务端 2.2客户端 三.发送.接收数据 3.1发送 3.2接收数据 四.自定义的结构体 4.1 发送端 4.2接收端 IPV6版本套接字的创建 ...

  2. 【SQL必知必会】SQL知识查缺补漏

    一.使用函数处理数据 1.字符串处理函数-顾客登录名[sql22] 思路1:substring(word,1,n).upper.concat SELECT cust_id, cust_name, UP ...

  3. CyclicBarrier循环屏障源码解析(基于jdk11)

    目录 CyclicBarrier循环屏障源码解析(基于jdk11) 1.1 CyclicBarrier概述 1.2 CyclicBarrier原理 1.2.1 基本结构(jdk11) 1.2.2 aw ...

  4. 出现报错:The field admin.LogEntry.user was declared with a lazy reference to 'api.user', but app 'api' isn't installed.解决方法

  5. python 之将xmind转为excel用例文件

    1.xmind文件模板如下所示(最后一个子级为预置条件) 2.excel用例模板 3.获取xmind文件数据并转成字典形式 from xmindparser import xmind_to_dict ...

  6. 【转载】解决CHM帮助文件无法从网络共享位置上直接打开的问题的方法

    近日在内网共享了些书籍,但发现其中的.chm文件竟然无法正常打开,而文件百分百是正常的..症状:无法从网上邻居的共享位置上直接打开.chm文件.从网络共享位置上打开.chm文件,显示为空白或运行不正常 ...

  7. 工业数据分析为什么要用FusionInsight MRS IoTDB?

    摘要:MRS IoTDB,它是华为FusionInsight MRS大数据套件中的时序数据库产品,在深度参与Apache IoTDB社区开源版的基础上推出的高性能企业级时序数据库产品. 本文分享自华为 ...

  8. Educational Codeforces Round 33 (Rated for Div. 2) 虚拟赛体验

    前言 就只做出了 \(A,B,C,D\) 是不是很弱? A.Chess For Three A,B,C 三人下棋,A和B先下,每次下完棋之后由现在观战的人(例如第一局就由C)代替下输的人. 每次输入一 ...

  9. 工作这么多年,我总结的数据传输对象 (DTO) 的最佳实践

    前言 数据传输对象 (DTO) 是一种设计模式,常用于软件开发不同层或者不同系统之间传输数据.DTO 的主要目的是封装数据并防止它被其他层或系统直接访问或修改.通过遵循一组最佳实践,开发人员可以确保他 ...

  10. MySQL 嵌套子查询 with子句 from子查询 in子查询 join组合

    一.适用场景和方法 (1)适用场景 考虑查询过程中是否存在以下情况: 查询某些数据时需要分组才能得到,某些数据不需要分组就能得到或者分组条件不同: 查询某些数据时需要where条件,某些列不需要whe ...