时间戳

首页 > 解决方案 > vue.js 是否也会为 props 发生 setter/getter？

javascript - vue.js 是否也会为 props 发生 setter/getter？

问题描述

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

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

问题1）

子组件

props:{
  passedArray
},

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

现在，当我创建新数组并使其等于 prop 数组时，vue 会为 childArray 的每个对象的每个属性创建新的 setter/getter 吗？因为当 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，它的作用是它仍然为每个 prop 创建 setter/getter选项。那正确吗？

标签： javascriptvue.jsvuejs2vue-component

解决方案

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

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

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

编辑：第三季度

initProps只定义组件原型上的道具，它不会使它们反应。如果您想查看反应性是如何完成的，您可以查看src/core/observer/index.jsVue 源代码。

推荐阅读