vue.js setter/getter也适用于道具吗



假设我有一个父组件,在那里我初始化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

相关内容

  • 没有找到相关文章

最新更新