【组件中 data 为什么是一个函数？】的更多相关文章

vue中data必须是一个函数

前端面试时经常被问到:“组建中data为什么是函数”? 答案就是:在组件中data必须是一个函数,这样的话,每个实例可以维护一份被返回对象的独立拷贝.…

vue中组件的data为什么是一个函数

1. 前言 在学习vue的时候,一直纳闷一件事:组件的data数据为什么必须要以函数返回的形式,为什么不是简单的对象形式呢?遂带着问题去翻官方文档,文档中自然也写明了这么做的原因,本篇博文以官方文档给出的原因为基础,并加上具体的例子,来阐述这么设计的原因. 2.正文 组件是可复用的vue实例,一个组件被创建好之后,就可能被用在各个地方,而组件不管被复用了多少次,组件中的data数据都应该是相互隔离,互不影响的,基于这一理念,组件每复用一次,data数据就应该被复制一次,之后,当某一处复用的地方组…

Vue 组件中 data 为什么必须是函数

原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域),data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响 举个…

[Vue]组件——组件的data 必须是一个函数

普通的Vue实例data是一个对象: data: { count: 0 } 组件的data是一个方法: data: function () { return { count: 0 } } 详情见官网:https://cn.vuejs.org/v2/guide/components.html…

Vue之vue中的data为什么是一个函数+vue中路径别名alias设置

问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它在项目中会存在多个实例.如果data属性值是一个对象时,那么它所有的实例都会共享这些数据,这是很麻烦的事情,你不能确保你的所有实例中的属性值都不会重复. 我们的期望是,组件的每个实例都能独立的维护自己的数据. 解决方案 我们都知道,在JavaScript中,函数具有独立作用域快的特点,外部是无法访问…

Vue.js 组件中data的使用

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con…

039——VUE中组件之子组件中data使用实例与text-xtemplate的使用方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件之子组件中data使用实例与text-xtemplate的使用方法</title> <script src="vue.js"></script> </head> <body> <!…

vue组件中data为什么必须是一个函数？

因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象. 组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱.而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了.…

vue组件中data为什么必须是个函数

<body> <div id="app"> <counter></counter> </div> <template id="temp1"> <div> <input type="button" value="+1" @click="increment"> <h3>{{count}}</h3&g…

【Vue】定义组件 data 必须是一个函数返回的对象

Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter/setter,从而让 data 的属性能够响应数据变化.对象必须是纯粹的对象 (含有零个或多个的 key/value 对):浏览器 API 创建的原生对象,原型上的属性会被忽略.大概来说,data 应该只能是数据 - 不推荐观察拥有状态行为的对象. 一旦观察过,不需要再次在数据对象上添加响应式属性.因此推荐在创建实例之前,就声明所有的根级响应式属性. 实例创建之后,可以通过 vm.$data 访问原始数据对象.Vu…