VueJS $watch $refs

Возможно ли $watch Vue $refs?

Я хочу установить логику против дочернего компонента, который вложен внутри моего текущего экземпляра Vue, но внутри обратного вызова ready, $refs.childcomponent изначально undefined во время обработки.

внутри ready()

this.$watch('$refs', function() {
    console.log("not firing");
}, { deep: true });

Результат: Ошибка: превышен максимальный стек вызовов

watch свойство экземпляра

watch: {
  '$refs': {
     handler: function() { console.log("hit"); },
     deep: true
  }
}

результат: ничего.

Ответы

Ответ 1

Вы можете $watch $refs.<name>.<data> но не $refs.<name>, не говоря уже о $refs.

https://jsfiddle.net/kenberkeley/9pn1uqam/

const Counter = {
  data: () => ({
    i: 0
  }),
  template: '<fieldset>
    <p>Counter</p>
    <code>i = {{ i }}</code>
    <button @click="i += 1"> Add One </button>
  </fieldset>'
}

const App = {
  components: { Counter },
  mounted () {
    this.$watch(
        () => {
            return this.$refs.counter.i
        },
      (val) => {
        alert('App $watch $refs.counter.i: ' + val)
      }
    )
  },
  template: '<fieldset>
    <p>App</p>
    <counter ref="counter" />
  </fieldset>'
}

new Vue({
    el: '#app',
    render: h => h(App)
})

Ответ 2

Нет, $refs не реагируют, часы не будут работать.

Ответ 3

В смонтированном коде использования ниже:

this.$watch(
        () => {
            return this.$refs.<name>.<data>
        },
      (val) => {
        alert('$watch $refs.<name>.<data>: ' + val)
      }
    )