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. 【Hadoop面试】基础概念、HDFS、MapReduce、Yarn、实战

    一.Hadoop概念及架构 1.是否看过Hadoop源码 2.正常工作的hadoop集群中hadoop都分别需要启动哪些进程,他们的作用分别是什么 3.hadoop和spark中的文件缓存方式 4.h ...

  2. 手摸手,使用Dart语言开发后端应用,来吧!

    前言 这几天连续发了几篇关于 Dart 开发后端应用的文章,主要是介绍了 Dart 的一些优点,比如异步任务,并发处理,编译部署等等. 俗话说,光说不练假把式,今天我们来真正开始一个 Dart 后端应 ...

  3. 使用 SSH 连接 Git 服务器

    关于 SSH SSH (Secure Shell) 是一种安全的远程登录协议,可以让你通过安全的加密连接进行远程登录.目前,Mac.Windows 10.Linux 系统均有内置 OpenSSH 客户 ...

  4. django框架(部分讲解)

    ORM执行SQL语句 有时候ORM的操作效率可能偏低 我们是可以自己编写SQL的 方式1: raw()方法执行原生sql语句 models.User.objects.raw('select * fro ...

  5. 零基础入门 Java 后端开发,有哪些值得看的视频?

    目前网络上充满了大量的 Java 视频教程,然而内容却鱼龙混杂,为了防止小伙伴们踩坑,一枫结合自己的学习经验,向大家推荐一些不错的学习资源. 作为一名非科班转码选手,可以说,我是在哔哩哔哩上的研究生! ...

  6. uniapp input框聚焦时软键盘弹起整个页面上滑,固定页面不让上滑问题

    根据需求,软键盘弹起时,不允许页面整体向上滑动 用到的属性是:  :adjust-position="false" uni-app 软键盘顶起底部fixed定位的输入框 页面就不会 ...

  7. CH32V307以太网(芯片内部10M)-针对新固件的Lib库

    沁恒的CH32V307网络库在前段时间做了一个更新,相对于以前的Lib,主要的功能没有什么特别大的变化,但是底层的一些操作仔细看的话,还是不少的区别的. 首先,官方提供的例程,工程结构以及头文件优一些 ...

  8. ONNX模型分析与使用

    本文大部分内容为对 ONNX 官方资料的总结和翻译,部分知识点参考网上质量高的博客. 一,ONNX 概述 深度学习算法大多通过计算数据流图来完成神经网络的深度学习过程. 一些框架(例如CNTK,Caf ...

  9. 03初识MapReduce

    初识MapReduce 一.什么是MapReduce MapReduce是一种编程范式,它借助Map将一个大任务分解成多个小任务,再借助Reduce归并Map的结果.MapReduce虽然原理很简单, ...

  10. pytorch 配置详细过程

    torch github 项目多 方便,api好调用 cpu版本 装torch 安装最新版本的就可以. torchvision 要版本对应 算法: torchvision版本号= torch版本号第一 ...