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

2024-11-06

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

vue组件中data是个函数

当我们const vm = new Vue({ el : '#app', data : { msg:‘hello World’ } })用习惯了,data是一个对象,可到了vue组件 Vue.component('cp',{ template : `<div> <span>{{ info }}</span> </div>`, data (){ return { info : 'hello Vue' } } }) 因为Vue.component

怎样理解 Vue 组件中 data 必须为函数 ?

组件意在复用 , 若为对象, 则会相互干扰. 且 Vue 不允许此事发生, 规定必须为函数, 否则报错. 原理如下对象 // 模拟创建组件 var Component= function() {} // 模拟使用对象作data Component.prototype.data = { a: 1 } // 模拟使用组件 var component1 = new Component() var component2 = new Component() // 发现 data 共用, 相互影响 c

Vue组件里面data为什么必须是个函数

在创建或注册模板的时候,传入一个data属性用来绑定数据,但是在组件中,data必须是一个函数,而不能直接把对象赋值给它. export default { name:'app', data(){ return { } }, methods:{ }}上面的组件,是一个简易操作,实际上它首先需要创建一个组建构造器,然后注册组件,注册组件的本质其实就是建立一个组件构造器的引用,使用组建才是真正创建一个组件实例.所以,注册组件其实并不产生新的组件类,但会产生一个可以用来实例化的新方式. 理解这点之后,

深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数

1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据. <template id="MyCpn"> <div> <h2>组件数据的存放 </h2> <p>{{title}}</p> </div> </template> <script>

vue组件中的data与methods

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="app"> <mycom></mycom> <counter></counter> </div> <template id="temp">

15.Vue组件中的data

1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中的 data 必须是一个方法 data: function(){}或者data(){} // 4. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行; // 5. 组件中的data 数据使用方式,和实例中的 data 使用方式完全一样! 代码实例: <!DOCTYP

黑马vue---61、为什么vue组件的data要是一个函数

黑马vue---61.为什么vue组件的data要是一个函数一.总结一句话总结: 因为js中以函数为变量作用域,所以这样可以保证每个组件的数据不互相影响二.why components data must be a function <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport

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