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为什么必须是一个函数？

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

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

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

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

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为什么必须是个函数

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