Это нормально, чтобы вырваться из парадигмы Vue (иногда)

Vue Way ™ Делать вещи – это здорово.

Трубопровод Data-> template-> dom работает замечательно хорошо. Вы указываете данные и шаблон и позволяете VUE выполнять работу по подключению их вместе с реальным DOM.

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

Важно знать, когда имеет смысл вырваться из петли Vue и обойти проблемы с некоторым простым JavaScript.

” Глобальное поведение DOM

Самая большая проблема номер один, с которой вы столкнетесь с тем, что обычно нельзя решить. Путь VUE – когда вам нужно получить доступ к какой -то типам функциональности DOM, которая не вписывается в парадигму родителей/ребенка на основе компонентов VUE.

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

«Наивный» способ сделать это – использовать Vue V-on Директива для прослушивания событий мыши/прикосновения.

export default {
  data() {
    return {
      width: 300,
      offset: 0,
      dragging: false,
    };
  },
  methods: {
    startDrag() {
      const { left, height } = this.$refs.panel.getBoundingClientRect();
      this.offset = left;
      this.height = height;
      this.dragging = true;
    },
    drag(e) {
      if (this.dragging) {
        if (e.touches) this.width = e.touches[0].clientX - this.offset;
        else this.width = e.clientX - this.offset;
      }
    },
    stopDrag() {
      this.dragging = false;
    },
  },
};

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

Отправляйтесь на Оригинальный пост Чтобы попробовать интерактивный компонент.

Чтобы бороться с этой проблемой, что вам нужно сделать, это зарегистрировать мысли и MouseUp События в самом документе, так что даже когда указатель выходит из ручки, слушатели все равно будут вызывать. А так как доступ к объекту документа случайным образом из какого -либо компонента не является проблемой VUE, вам просто нужно сделать это в обычном JS.

export default {
  data() {
    return {
      width: 300,
      offset: 0,
      dragging: false,
    };
  },
  methods: {
    startDrag(mouse) {
      const { left, height } = this.$refs.panel.getBoundingClientRect();
      this.offset = left;
      this.height = height;
      if (mouse) {
        document.addEventListener("mouseup", this.drag);
        document.addEventListener("mousemove", this.stopDrag);
      }
    },
    drag(e) {
      if (e.touches) this.width = e.touches[0].clientX - this.offset;
      else this.width = e.clientX - this.offset;
    },
    stopDrag() {
      document.removeEventListener("mouseup", this.drag);
      document.removeEventListener("mousemove", this.stopDrag);
    },
  },
};

Приведенный выше пример может показаться тривиальным, мы просто добавляем самих слушателей. Но дело в том, что даже в ситуациях, которые не так очевидны, как это, вы должны спросить себя, если вы без необходимости сражаться, когда вы можете просто назвать API DOM самостоятельно.

Не только слушатели событий

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

Если бы вам пришлось сделать компонент уведомлений, вам, вероятно, нужно было бы добавить свой HTML к концу тега тела, чтобы убедиться, что он всегда будет оставаться на вершине другого контента. То же самое касается модалов (жестко с VUE 3 Этот случай смягчается с помощью использования Teleport ).

Работа с Canvas или WebGL также потребует от вас соединения между данными и рендерингом.

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

Оригинал: “https://dev.to/andi23rosca/it-s-ok-to-break-out-of-the-vue-paradigm-sometimes-1lcg”