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?
Vue.js是一款JavaScript前端框架,旨在更好地组织与简化Web开发。Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模型的交互。
什么是vue组件?
组件是可复用的 Vue 实例,且带有一个名字:在这个例子中是 <button-counter>
,如下:
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
data为什么不是对象?
一个vue组件就是一个vue实例。
在JS当中实例是通过构造函数来创建的,每个构造函数可以new
出很多个实例,那么每个实例都会继承原型上的方法或属性。
vue的data数据其实是vue组件原型上的属性,数据存在于内存当中
vue组件为了保证每个实例上的data数据的独立性,规定了必须使用函数,而不是对象。
因为使用对象的话,每个实例(组件)上使用的data数据是相互影响的,这当然就不是我们想要的了。对象是对于内存地址的引用,直接定义个对象的话组件之间都会使用这个对象,这样会造成组件之间数据相互影响。