vue系列:data为什么必须是一个返回对象的方法

结论

因为对象是引用数据类型,如果你写成对象,这个组件在多处被引用,只要修改一处的值,那么另一处的引用的值也会变化,这样就乱套了。

而使用返回对象的函数,由于每次返回的都是一个新对象(Object的实例),引用地址不同,则不会出现这个问题。

举例

对象方式:

var data = {
  x: 1
}
var vm1 = {
  data: data
}
var vm2 = {
  data: data
}
vm1.data === vm2.data // true,指向同一个对象

函数方式:

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
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章