vue自定义组件引入不生效,vue中data为什么必须是函数

vue中data为什么必须是函数

vue自定义组件引入不生效,vue中data为什么必须是函数


vue中data必须是函数是为了保证组件的独立性和可复用性 , data是一个函数,组件实例化的时候这个函数将会被调用 , 返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次,就分配几个内存地址,他们的地址都不一样 , 所以每个组件中的数据不会相互干扰,改变其中一个组件的状态 , 其它组件不变 。
vue自定义组件引入不生效ajax里面参数:data 表示 你要传递的参数URL 表示, 你要请求的路径type 表示, 什么类型, 比如 jsonsuccess 表示, 如果成功的话 执行进入这个函数, 这个success里面的data表示你请求的这个URL返回的数据还有error 表示错误执行什么.等等
vue 中的 data 为什么是函数new Vue() 实例中,data可以是直接是一个对象,为什么在vue组件中 , data必须是一个函数呢?
因为组件是可以复用的 , js里对象是引用关系,如果组件data是一个对象,那么子组件中的data 属性值会相互污染,产生副作用 。
所以一个组件的data选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝,new Vue的实例是不会被复用的,因此不会存在以上问题 。
Vue实例里面的data属性为什么用函数返回其实vue上有提到
这样会使组件的每个实例都有自己私有属性data , 组件的实例属性才不会被污染 。
试想下,
有对象myData,组件有实例A、B , 实例A和B的data绑定的是对象myData(隐含的意思是各个实例的data它们在内存中指向的地址是一样),当更新实例A的myData的某个属性的时候,因为对象指向的内存地址是同一个,所以势必影响到实例B
所以才需要data返回是一个函数,函数返回一个新对象,这样实例A和实例B绑定的data对象是两个不同的对象
为什么vue中data必须是一个函数类比引用数据类型
Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了;
javascipt只有函数构成作用域(注意理解作用域,只有 函数的{} 构成作用域, 对象的{} 以及 if(){} 都不构成作用域),data是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响
举个?
如果两个实例同时引用一个对象,那么当你修改其中一个属性的时候,另外一个实例也会跟着改;
两个实例应该有自己各自的域才对,需要通过下面的方法来进行处理
这样么一个实例的data属性都是独立的,不会相互影响了.
所以,你现在知道为什么vue组件的data必须是函数了吧 。这都是因为js本身的特性带来的,跟vue本身设计无关 。其实vue不应该把这个方法名取为data(),应该叫setData或其他更容易理解的方法名 。
【vue自定义组件引入不生效,vue中data为什么必须是函数】

    推荐阅读