javascript - vue.js props 也会发生 setter/getter 吗？

Question

假设我有一个父组件，我在 Vue 的 data 属性中初始化一个数组变量。然后我将 10,000 个对象元素放入该数组中。这意味着该数组的每个对象的每个属性都将具有 Vue 为我们制作的 setter/getter。

现在，假设我将此数组作为 Prop 传递给子组件。

问题 1)

子组件

props:{
  passedArray
},

data(){
  return { 
    childArray:[]
  }
}
created(){
   this.childArray = passedArray
}

现在，当我创建新数组并使其等于 prop 数组时，vue 会为 childArray 的每个对象的每个属性创建新的 setter/getters 吗？因为当 vue 看到数组相等并且数组在数据中描述时，它会为每个人创建 setter/getter。 如果它不会创建 setter/getter，那么它是否检查传递的数组对象是否已经设置了 setter/getter？

这是否意味着该子组件的代码根本不会增加内存 (RAM)？

2)如果我在子组件中制作类似的东西会怎样

created(){
   this.childArray = [].concat(passedArray); 
}

那现在呢？它会产生新的 setter/getter 吗？

这会增加 RAM 一点，因为 childArray 现在必须存储 passArray 中对象的引用。在前面的情况下，它只需使其等于传递的数组。对吗？

问题3)

在我看来，如果传递的 props 是一个对象或数组，它根本不会为 props 数据创建新的 setter/getter，但我在 vue 源代码中看到了 initProps，它的作用是仍然创建 setter/getter对于每个 Prop 选项。是这样吗？

Answer 1

正如您所猜测的，如果对象已经是响应式的，Vue 不会创建额外的 getter 或 setter，但您的根数据项将始终拥有自己独立的 getter/setter。

对于数组，Vue 会检查每个对象项是否是响应式的，如果不是，它就会使其如此。

因此这两个语句实际上不会创建新的 getter 或 setter。但是，如果 passedArray 是 API 调用(在 Vue.js react 性之外)之类的结果，那么将为每个对象项创建它。

编辑:第三季度

initProps 仅定义组件原型(prototype)上的 Prop ，并不使它们具有反应性。如果您想查看 react 性是如何完成的，您可以查看 Vue 源代码中的 src/core/observer/index.js。