vue 为什么组件的data要写成返回对象的函数
原因:对象为引用类型,当重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题上面解释完,你可能还是不大清楚,下面我们举个简单的例子:// 1.对象方式(所有重用的实例中的data均为同一个对象)var da...
·
原因:对象为引用类型,当重用组件时,由于数据对象都指向同一个data对象,当在一个组件中修改data时,其他重用的组件中的data会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题
上面解释完,你可能还是不大清楚,下面我们举个简单的例子:
// 1.对象方式(所有重用的实例中的data均为同一个对象)
var data = {
x: 1
}
var vm1 = {
data: data
}
var vm2 = {
data: data
}
vm1.data === vm2.data // true,指向同一个对象
// 2.函数方式(所有重用的实例中的data均为同一个函数)
var func = function () {
return {
x: 1
}
}
var vm3 = {
data: func
}
var vm4 = {
data: func
}
vm3.data() === vm4.data() // false,指向不同对象
注意: 函数方式中data都指向同一个函数,但这个函数每次的返回值都是一个新的对象,可以尝试如下(效果相同)
{x:1} === {x:1} // false
new Object({x:1}) === new Object({x:1}) // false
欢迎关注、点赞
更多推荐
已为社区贡献4条内容
所有评论(0)