Буквальные объекты и свойства реактивности в Vue 2.5 - PullRequest
Новая
       32

Буквальные объекты и свойства реактивности в Vue 2.5

0 голосов
/ 10 июня 2018

Почему вложенные поля литеральных объектов, связанных со свойством компонента, не реагируют и не наблюдаются?

Пример: 

<my-comp :my-prop="{ my: { literal: { object: { with: { nested: { field: ‘not reactive’ }}}}}}"></my-prop>

Когда вы делаете это внутри my-comp: 

created() {
  console.log(this); // you can see in the Chrome console that nested fields of this.myProp do not get reactive (i.e. no getters)
}

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

Спасибо!

1 Ответ

0 голосов
/ 10 июня 2018

Это потому, что отображаются шаблоны HTML.

Когда Vue «компилирует» ваш html, он в основном создает следующую «вычисляемую» функцию 

render(createElement) { /* `createElement` is also known as `h` in the Vue world */
    return createElement('my-comp', {
        props: {
            myProp: { my: { literal: { object: { with: { nested: { field: ‘not reactive’ }}}}}},
        },
    );
},

Поскольку полный поток значения myProp никогда не проходит через функцию данных,ни через возвращаемый результат вычисленной нормальной функции, она никогда не будет помечена для реактивности.

Хотя может показаться странным, что Vue отмечает возвращаемый результат всех «вычисленных» функций, ожидайтеспециальная функция рендеринга реагирует, это действительно имеет смысл, если взглянуть на идею дизайна Vue, а именно на вход и выход.Эта не маркировка реактивности дает нам повышение производительности по сравнению с маркировкой реактивности.

Если вам все еще требуется, чтобы она была реактивной (и, следовательно, вы хотите пойти вразрез с основными принципами Vue (и, таким образом, сделать свое приложение)труднее понять)), вы можете сделать это, сохранив значение в разделе данных вашего компонента или вернув его из вычисляемого свойства.

...