Vue часы неожиданно позвонили дважды - PullRequest
Новая
       6

Vue часы неожиданно позвонили дважды

4 голосов
/ 22 мая 2019

обновление # 2: Это не ошибка, это была моя собственная ошибка. Я расширил BaseComponent методом extend(), а также поместил extends: BaseComponent в опции. Я думал, что мне нужно было и то и другое, но extends: BaseComponent в опциях кажется достаточно.
Таким образом, двойное «расширение», по-видимому, дублирует наблюдателя, что приводит к странному поведению, которое я задокументировал в своем вопросе.

обновление: Я выяснил, что вызывает эту проблему: Наблюдатель, кажется, дублируется, потому что он в BaseComponent, который расширен Component, который используется в моем примере. так что export default BaseComponent.extend({ name: 'Component', ...}), кажется, дублирует объект watch вместо «слияния» его - теперь есть один в BaseComponent (где он реализован изначально) и один в Component - и, конечно, оба реагируют на проп -updates.
Это похоже на ошибку IMHO.

Использование vue-cli с отдельными компонентами файла.
Я устанавливаю опору в одном компоненте с помощью метода: 

<template>
  <div>
    <other-component :my-object="myObject" />
  </div>
</template>

<script>
  export default (Vue as VueConstructor).extend({
    data() {
      return {
        myObject: null
      }
    },

    methods: {
      actionButtonClicked(action, ID) {
        console.log('actionButtonClicked');

        this.myObject = {
          action: action,
          ID: ID
        }
      }
    }
  });
</script>

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

<script>

  export default (Vue as VueConstructor<Vue>).extend({
    /* ... */
    props: {
      myObject: {
      type: Object,
      default: null
    },

    watch: {
      'myObject.ID'(value, oldValue) {
        console.log('watcher executed');
      }
    }

    /* ... */
  });

</script>

поэтому в консоли я получаю вывод: 

actionButtonClicked
watcher executed
watcher executed

.. каждый раз, когда вызывается метод.

Я уже перепробовал все разные варианты наблюдателей - например с deep: true + handler. но все это ничего не изменило в том, что наблюдатель был вызван дважды.

1 Ответ

1 голос
/ 22 мая 2019

Мой наблюдатель был продублирован, потому что я расширял свой BaseComponent двумя способами:

  • методом extend() самого компонента
  • , добавив extends: BaseComponent в опции "внешнего" компонента

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

...