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. 聚焦技术,锐意创新,GaussDB给世界一个更优选择

    摘要:从整个行业应用层面来看,现在,数据库的国产化时代已经到来. 本文分享自华为云社区<聚焦技术,锐意创新,GaussDB给世界一个更优选择>,作者: GaussDB数据库. 今天,以&q ...

  2. 【转载】【Word】项目编号应用样式后出现黑框的解决方案

    本文中的宏代码来自: https://www.zhihu.com/question/38985919 Word使用项目编号后,出现黑框,如下图所示: 网上大多数解决方案在重新打开文档后,依然还是有黑框 ...

  3. Potree 001 Potree介绍

    1.Potree是什么 Potree是一种基于WebGL的点云数据可视化解决方案,包含点云数据转化,以及进行可视化的源码.该解决方案的主要优势在于对点云数据进行了多尺度的管理,在数据传输和可视化上都做 ...

  4. Windows下使用vscode连接Linux服务器进行C++代码运行与调试

    参考链接: vscode + SSH 配置 https://blog.csdn.net/irober/article/details/112724986 launch.json + tasks.jso ...

  5. flask_apscheduler

    网上很多文章包括官网给出来的,更多的是执行的函数和初始话app在同一文件 按照app 路由 模型类 视图 往下延申,项目已经成型,所以上述的方法不适用. (不用操心模型类与app互相导入的错误)下面分 ...

  6. Asp-Net-Core权限认证

    title: Asp.Net Core权限认证 date: 2022-10-27 16:17:52 tags: - .NET 翻了很多的博客,文档,发现asp.net core自带的权限认证还是比较复 ...

  7. 《深度探索C++对象模型》第三章 Data语意学

    首先给出以下例子: class X{}; class Y:public virtual X{}; class Z:public virtual X{}; class A:public Y,public ...

  8. SPOJLCMSUM - LCM Sum

    简要题意 \(T\) 组数据,每组数据给出一个 \(n\),计算: \[\sum_{i=1}^{n}{\operatorname{lcm}(i,n)} \] \(1 \leq T \leq 3\tim ...

  9. iOS如何实现自动化打包

    iOS如何实现自动化打包 前言 在我们的日常开发工作中,避免不了会出现这样的场景:需求迭代开发完成之后,需要提供ipa包给QA同学进行测试,一般会执行如下流程:1.执行Git Pull命令,拉最新的代 ...

  10. oracle创建全文索引(oracle text)

    drop table test.QQ_MsgRecord; CREATE TABLE test.QQ_MsgRecord ( msg_group VARCHAR2(200), msg_object V ...