vue: добавьте настраиваемое свойство к «this» внутри компонента, и предотвратите добавление «__ob__» и getter / setter - PullRequest
Новая
       32

vue: добавьте настраиваемое свойство к «this» внутри компонента, и предотвратите добавление «__ob__» и getter / setter

0 голосов
/ 01 декабря 2018

Я хочу добавить свойство к this внутри компонента, и я просто хочу, чтобы оно разделяло это свойство с методами компонента, но не использовало его внутри шаблона.

И я нахожу единственный способ добавитьсвойство this состоит в том, чтобы добавить его в функцию data(), например 

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

, и Vue сделает group имеющим __ob__, а также методы получения и установки для всех атрибутов enter image description here

Должен ли я беспокоиться об этом?Не вызовет ли это проблемы с производительностью, если я продолжу добавлять свойство таким образом?Если так, как я могу разделить переменную среди методов компонента

Ответы [ 2 ]

0 голосов
/ 01 декабря 2018

Когда Vue создает экземпляр компонента, он просматривает каждое свойство в вашем data и создает для него пару получатель / установщик в дополнение к присоединению наблюдателя, если свойство является объектом / массивом.Это делается для того, чтобы компонент реагировал на мутации состояния.Это приводит к небольшому увеличению затрат на инициализацию и бухгалтерского учета, но это весьма незначительно для всех намерений и целей, поэтому я бы не стал сильно беспокоиться об этом.

Есть замечательный доклад под названием Демистификация производительности платформы Frontend Эвана Ю (Evan You), создателя Vue, в которой он сравнивает различные аспекты производительности сред интерфейса и описывает, как реализация Vue отличается от других сред.Он обрисовывает компромиссы, которые он должен был сделать, чтобы добиться реактивности, и приходит к выводу, что, если вы не создаете ОГРОМНОЕ приложение, вы обычно не должны беспокоиться о снижении производительности из-за того, как работает Vue.

Тем не менее, если вы создаете такое огромное приложение и сталкиваетесь с проблемами производительности, вы можете переместить любое состояние, которое не реагирует на хук created, и Vue не отследит его .. 

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

Для объектов, которые не будут изменены, вы также можете использовать Object.freeze () , и Vue также не будет их отслеживать .. 

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

// Then in your data
data() {
  return {
    group,
  }
}
0 голосов
/ 01 декабря 2018

Вы не должны беспокоиться об этом, причина в том, что children объект является ссылкой от родительского объекта group не новый объект, а __ob__ является шаблоном наблюдателя, который наблюдатель обнаруживает изменения вконстатируйте, установите и получите новые значения, относящиеся к объекту наследования, чтобы в памяти JavaScript, которая хранится в одном объекте, а не 2, я рекомендую просмотреть JavaScript: серия твердых деталей для Will Sentance & Расширенные возможности Vue.js с нуля для Эвана Ю

...