vue data为什么是函数
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为什么是函数的更多相关文章
- Vue 组件 data为什么是函数?
在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...
- Vue 组件 data为什么是函数
在创建或注册模板的时候,传入一个data属性作为用来绑定的数据.但是在组件中,data必须是一个函数,而不能直接把一个对象赋值给它. Vue.component('my-component', { t ...
- 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数
1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...
- vue data不可以使用箭头函数的问题解析
这篇文章主要介绍了vue data不可以使用箭头函数问题,本文通过源码解析给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 首先需要明确,a() {}和 b: () => {} ...
- 黑马vue---61、为什么vue组件的data要是一个函数
黑马vue---61.为什么vue组件的data要是一个函数 一.总结 一句话总结: 因为js中以函数为变量作用域,所以这样可以保证每个组件的数据不互相影响 二.why components data ...
- vue组件中的data为什么是函数?
一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...
- Vue组件中的Data为什么是函数。
简单点说,组件是要复用的,在很多地方都会调用. 如果data不是函数,而是属性,就又可能会发生多个地方的相同组件操作同一个Data属性,导致数据混乱. 而如果是函数,因为组件data函数的返回值是 ...
- Vue生命周期 钩子函数和组件传值
Vue生命周期 钩子函数 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. 同时在这个过程中也会运行一 ...
- $.getJSON('url',function(data){}) 中回调函数不执行
$.getJSON('url',function(data){}) 中回调函数不执行 url 中的 json 格式不正确 ,浏览器返回并没有报错 {'湖北':[114.11438,30.849429] ...
- vue & $data & data
vue & $data & data vm.a === vm.$data.a https://vuejs.org/v2/api/#data https://flaviocopes.co ...
随机推荐
- 【数据库】Oracle建表、创建序列、添加触发器生成自增主键
CREATE TABLE "TEST"."T_ORDER" ( "AUUID_0" VARCHAR2 ( 255 ) NOT NULL ...
- 【Java】FileUtils-获取路径的所有文件(或文件夹)
一.获取指定路径下的所有Excel文件 package com.boulderaitech.utils; import java.io.File; import java.util.Arrays; p ...
- Qt操作Json小结
Qt操作Json 1.QJsonDocument 1.详细说明 QJsonDocument类提供了读写JSON文档的方法. QJsonDocument是一个封装了完整JSON文档的类,可以从基于UTF ...
- JavaScript:严格模式"use strict"
因为历史遗留问题,JS其实存在很多feature,以及兼容性问题: 所以JS在ES5之后,新增了一个严格模式,以区别于普通模式,用来激活新的特性,使得某些代码的执行准确无误: 如何开启严格模式? 在J ...
- error: expected ‘)’ before ‘PRIx64’
打印uint64时编译报错 printf("prefix:0x%"PRIx64"\n",ipv6Prefix); 解决办法:添加头文件 #include < ...
- 基于Hexo搭建静态博客
关于静态博客 通常来讲,建立个人博客有2种方式: 第一,直接在第三方博客平台注册博客空间,如:博客园,简书,CSDN等,这种方式建立的博客,所有数据都存放在博客平台. 第二,自建博客系统,这种方式就是 ...
- 搭建一个Hexo个人博客系统
0x01 前言 虽然说前两天折腾了一下博客园(自己之前也有做过自己的博客,奈何维护费用太贵了,真的消耗不起,钱要花在刀刃上.) 网上有些教程有些参差不齐,今天给自己的真实搭建过程呈现给大家. 0x02 ...
- VuePress个人博客搭建
vuepress概述 VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档 ...
- python进阶之路7 数据类型的内置方法
内容回顾 while 循环补充说明 1.死循环 2.while循环嵌套和全局标志位 for循环 1.for 变量名 in 待遍历数据 for循环体代码 2.for 也可以与break continue ...
- Strapi入门记--01创建项目,账户,测试表,测试接口
Strapi 是什么 中文文档地址 Strapi 是一个开源的无头 CMS,开发人员可以自由选择他们喜欢的工具和框架,并允许编辑使用他们的应用程序的管理面板来管理和分发他们的内容.基于一个插件系统,S ...