假设我有一个父组件,在那里我初始化Vue的数据属性中的数组变量。然后我将10000个对象元素推入这个数组。这意味着这个数组的每个对象的每个属性都将有Vue为我们制作的setter/getter
现在,假设我将这个数组作为道具传递给子组件。
问题1(
子组件
props:{
passedArray
},
data(){
return {
childArray:[]
}
}
created(){
this.childArray = passedArray
}
现在,当我创建新的数组并使其等于prop数组时,vue会为childArray的每个对象的每个属性创建新的setters/getter吗?因为当vue看到数组相等并且数组在数据中被描述时,它会为每个人创建setters/getters如果它不生成setter/getter,那么它会检查传递的数组的对象是否已经设置了setter/getter吗
这是否意味着这个子组件的代码根本不会增长内存(RAM(
2( 如果我在Child组件中做这样的东西怎么办
created(){
this.childArray = [].concat(passedArray);
}
现在怎么样?它会成为新的二传手吗
由于childArray现在必须存储passedArray中对象的引用,这将使RAM稍微增长一点。在前面的例子中,它只需要使它等于传递的数组。对吧
问题3(
在我看来,如果传递的props是一个对象或数组,它根本不会为props数据创建新的setter/getter,但我在vue源代码中看到了initProps,它所做的是仍然为每个prop选项创建setter/getters。是这样吗?
正如您所猜测的,如果对象已经是被动的,Vue不会创建额外的getter或setter,但您的根数据项将始终拥有自己独立的getter/setter。
对于数组,Vue检查每个对象项是否是反应性的,如果不是,它会使其成为反应性的
因此,这两个语句实际上都不会创建新的getter或setter。然而,如果passedArray
是类似API调用的结果(在Vue.js反应性之外(,则将为每个对象项创建它。
编辑:Q3
initProps
只定义了组件原型上的道具,并没有使它们成为反应性的。如果你想了解反应性是如何完成的,你可以看看Vue源中的src/core/observer/index.js
。