提示：将自定义属性添加到组件中的“ this”内部，并防止添加“ __ob__”和getter / setter

Question

我想在组件内部的this中添加一个属性，我只希望它在组件的方法之间共享该属性，而不是在模板内部使用它。

我发现向this添加属性的唯一方法是在data()函数内部添加属性，例如

data() {
  return {
    group: {
      children: []
    }
  }
}

和Vue将使group具有__ob__以及所有属性的获取器和设置器

我应该为此担心吗？如果我以这种方式继续添加属性，是否会导致性能问题？如果是这样，我该如何在组件的方法之间共享一个变量

Answer 1

当Vue创建组件实例时，它会遍历您data中的每个属性，并为其创建一个getter / setter对，如果该属性是一个对象/数组，则还会附加一个观察者。这是为了使组件对状态突变具有反应性。这样会导致初始化成本和簿记成本略有增加，但这对于所有意图和目的而言都是可以忽略的，因此我不必为此担心太多。

Vue的创建者Evan You做了一个很棒的演讲，名为Demystifying Frontend Framework Performance，他在演讲中比较了前端框架的不同性能方面，并描述了Vue的实现与其他框架相比的情况。他概述了为实现反应性而必须进行的权衡，并得出结论，除非您要创建巨大的应用程序，否则通常不应该因为Vue的工作方式而担心性能下降。

如果您正在创建如此大的应用程序，但确实遇到性能问题，则可以移动对created钩子无反应的任何状态，而Vue不会跟踪它。

created() {
 this.group = {
   children: []
 }
}

对于不会被修改的对象，您也可以使用Object.freeze()，而Vue也不会跟踪它们。.

const group = {children: []}
Object.freeze(group)

// Then in your data
data() {
  return {
    group,
  }
}

Answer 2

您不必担心，原因是children对象是父对象group的引用，而不是新对象，并且__ob__是观察者模式，观察者以检测状态的变化并设置并获取与继承对象相关的新值，以便在全部存储在一个Object而非2对象中的JavaScript内存中，我建议参阅JavaScript: The Hard Parts系列的Will Sentance＆{ {3}}代表Evan You