LINUX.ORG.RU

Как геттеры в Vue получает список своих зависимостей?

 , , ,


0

1

Здравствуйте

В гайде по Vue написано, что геттеры кешируют результат и автоматически обновляют его когда меняется значение одного из зависимых свойств. Например тут:

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

значение свойства «computed» изменится только если изменить свойство this.message

Подскажите, при помощи какой такой черной магии, Vue для каждого геттера получает список свойств, от которых этот геттер зависит? Неужто парсит тело функции регулярками?

ЗЫ: Исходники пробовал читать - не смог

★★★★★

Я не использую vue, так что могу ошибаться. Но предполагаю, что оно в любом случае высчитывает все поля. Имелось ввиду, что dom не меняется, если не изменилось computed, которое меняется когда меняется this.message.split. То есть никаких регулярок там нет, поле computed всегда считается.

anonymous ()
Ответ на: комментарий от anonymous

Что-то оно и вовсе не вычисляется

app = new Vue({
    el: "#report-app",
    data: {
        a: 1,
        b: 2,
    },
    computed: {
        c: function() {
            console.log('computing');
            return this.b + 1;
        }
    }
})

// В консоли
app.a = 5
app.b = 5
app.c
"computing"

При этом DOM обновляется при изменении this.b:

<div> b = {{b}}, c = {{c}} </div>
makoven ★★★★★ ()
Последнее исправление: makoven (всего исправлений: 3)

... Подскажите, при помощи какой такой черной магии, Vue для каждого геттера получает список свойств, от которых этот геттер зависит? Неужто парсит тело функции регулярками?

https://v1.vuejs.org/guide/reactivity.html

vinvlad ()
Ответ на: комментарий от vinvlad

Там написано «It should be noted that Vue.js computed properties are not simple getters. Each computed property keeps track of its own reactive dependencies. When a computed property is evaluated, Vue.js updates its dependency list and caches the result value»

А как именно компьютед проперти узнает от каких именно реактивных свойств компонента оно зависит - не написано. И что-то я не припомню в js механизма, позволяющего получить список переменных из тела функции кроме как парсинг этого тела

makoven ★★★★★ ()
Последнее исправление: makoven (всего исправлений: 1)
Ответ на: комментарий от makoven

А как именно компьютед проперти узнает от каких именно реактивных свойств компонента оно зависит - не написано.

Я исходники не смотрел - могу только высказать свои предположения. К примеру, можно отследить обращения ко всем реактивным свойствам во время вычисления конкретного значения «computed property» - это и будут текущие зависимости вычисленного и закэшированного значения этого самого «computed property».

vinvlad ()
Ответ на: комментарий от makoven

... кстати, при вычислении зависимостей учитываются именно и только реактивные свойства.

vinvlad ()
Ответ на: комментарий от makoven

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

vinvlad ()

Еще важный момент - это то, что «computed property» не всегда можно использовать. В вашей изначальной ссылочке на документацию приведен пример с «return Date.now()», где использование «computed property» - это логическая ошибка. Там, где при вычислении значения используются какие-то нативные Javascript-объекты переменчивой сущности или, к примеру, просто глобальные переменные (не реактивные) - следует использовать «Methods».

vinvlad ()
Ответ на: комментарий от vinvlad

К примеру, можно отследить обращения ко всем реактивным свойствам во время вычисления конкретного значения «computed property»

О, точно. Ловко придумано. Сам бы в жизни де догадался)

makoven ★★★★★ ()
Ответ на: комментарий от vinvlad

Ну эт понятно. Вообще занимательное чтиво, в совокупности с vuex. Я получил удовольствие похлеще чем от художественного произведения)

Удивительно чего можно намудрить на голом es5

makoven ★★★★★ ()
Последнее исправление: makoven (всего исправлений: 2)

А почему ты говоришь о this.message.split? Разве split это не вызов метода над this.message?

anonymous ()
Ответ на: комментарий от makoven

В теме написано

если изменить свойство this.message.split

Разве split это не функция, метод, а не свойство?

anonymous ()
Ответ на: комментарий от anonymous

Аа. Имелось в виду this.message. Скопипастил больше чем надо)

makoven ★★★★★ ()
Ответ на: комментарий от makoven

Я сначала и подумал что опечатка, а потом испугался, вдруг что-то совсем базовое не понимаю в js.

anonymous ()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.