vue：向组件内部的“this”添加自定义属性，并防止添加“__ob__”和getter/setter答案

【问题标题】：vue: add custom property to "this" inside component, and prevent being added "__ob__" and getter/settervue：向组件内部的“this”添加自定义属性，并防止添加“__ob__”和getter/setter
【发布时间】：2018-12-01 13:23:01
【问题描述】：

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

我发现将属性添加到 this 的唯一方法是将其添加到 data() 函数中，例如

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

并且 Vue 将使 group 具有所有属性的 __ob__ & getter & setter

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

【问题讨论】：

标签： vue.js vuejs2 vue-component

【解决方案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,
  }
}

【讨论】：

@Littlee React 也生成了its own trade-offs 并迫使您积极努力防止不必要的子组件重新渲染。归根结底，它们都是很棒的框架，因此您只需选择最适合您的偏好和风格的框架。

【解决方案2】：

你不用担心，原因是children对象是来自父对象的引用group不是一个新对象，而__ob__是一个观察者模式，观察者可以检测到其中的变化state 并设置和获取与继承对象相关的新值，以便在 JavaScript 内存中存储在一个 Object 而不是 2 个对象中，我建议您查看 Will Sentance 的 JavaScript: The Hard Parts 系列和 Evan You 的 Advanced Vue.js Features from the Ground Up 系列

【讨论】：