Как объявить вложенный реактивный компонент? - PullRequest
Новая
       16

Как объявить вложенный реактивный компонент?

0 голосов
/ 24 июня 2019

При чтении "Реакционная способность в глубине" в документации я вижу два момента, которые я не знаю, как интерпретировать:

Когда вы передаете простой объект JavaScript в экземпляр Vue в качестве данных вариант, Vue будет проходить через все свои свойства и конвертировать их для получения / установки с использованием Object.defineProperty

(...)

Из-за ограничений современного JavaScript (и отказа от Object.observe), Vue не может обнаружить добавление свойства или удаление . Так как Vue выполняет процесс преобразования getter / setter во время инициализации экземпляра в данных должно присутствовать свойство объект для Vue, чтобы преобразовать его и сделать его реактивным.

Как это связано с вложенным объектом, таким как 

[
  {
    "a": 1,
    "b": [
      {
        "c": 1
      },
      ...
    ]
  },
  {
    "a": 10,
    "b": [
      {
        "c": 10
      },
      ...
    ]
  },
  ...
]

В частности, как такой объект должен быть представлен data(), чтобы он был реактивным? 

data() {
    return {
        likeThis: [],
        orLikeThat: [{}],
        orMoreDetailed: [{a: null, b:[]}],
        orTheFullStucture: [{a: null, b:[{c: null}]}]
    }
}

1 Ответ

1 голос
/ 24 июня 2019

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

Вот простой пример, в котором я установил ваш объект как myNestedData вdata метод.Я связал myNestedData[0].b[0].c через v-model с элементом ввода, и вы можете видеть, что изменения этого значения отражаются в самом объекте myNestedData. 

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  data() {
    return {
      myNestedData: [{
        "a": 1,
        "b": [{ 
          "c": 1
        }]
      }, {
        "a": 10,
        "b": [{
          "c": 10
        }]
      }]
    };
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="myNestedData[0].b[0].c" type="number">
  <br>
  {{ myNestedData }}
</div>

Любой из примеров, которые вы привели в своем последнем разделе кода, был бы полностью реактивным, как в моем примере выше.Предупреждение о добавлении / удалении свойств вступает в действие только в том случае, если вы пытаетесь добавить или удалить свойства из этих реактивных объектов данных.

Вот простой пример, где свойство foo изначально устанавливается в методе data со значением [{ a: 'apple' }].Тогда this.foo[0].b устанавливается на 'banana' в хуке created компонента.Но поскольку свойство b this.foo[0] ранее не существовало, это свойство не является реактивным.Вы можете увидеть это, изменив значение второго входа, который связан с помощью v-model до foo[0].b.Изменение этого значения не обновляет значение этого свойства в foo. 

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({
  el: '#app',
  data() {
    return {
      foo: [{ a: 'apple' }]
    };
  },
  created() {
    this.foo[0].b = 'banana';
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="foo[0].a">
  <input v-model="foo[0].b">
  <br>
  {{ foo }}
</div>
...