Советы-к Vue-Developers: -avoid-Directly-Manipulation The Dom

Сегодня я работал со студентом над окончательным проектом Capstone, и у них были некоторые проблемы с привязкой данных. Когда мы начали копаться через код, одна вещь, которая меня застряла как большой красный флаг. Был флажок с идентификатором, а затем обработчик событий изменения togglestatus ()

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

const isChecked = document.getElementById("thecheckbox");

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

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

methods: {
  toggleStatus() {
    const isChecked = document.getElementById('thecheckbox').checked;
    if( isChecked ) {
      // do something
    } else {
      // do something else
    }
  }
}

Лучший подход

Лучший подход для этого – понять, что каждый экземпляр этого компонента имеет свое собственное состояние. Это означает, что мы можем связывать элементы управления в компоненте с нашими данными. Я собираюсь реорганизовать наш предыдущий пример, сначала создав переменную, называемую Ischecked, и по умолчанию ее к False. Это потому, что по умолчанию я хочу, чтобы этот флажок не проверил.

data() {
  return {
    isChecked = false
  }
}

Теперь, когда у нас есть какое -то состояние по умолчанию для флажести, мы можем использовать это в нашем компоненте. Вы можете привязать атрибут флажести, проверенный с переменной, Ischecked Анкет Когда компонент сначала загружается, он будет неконтролирован, но теперь связан с нашей переменной, поэтому каждый раз, когда он меняет наш флажок, будет обновлен.

Теперь в нашем методе статуса переключения мы можем просто использовать данные компонентов в нашем выражении IF. Мы также можем перевернуть статус флажона, установив его на противоположность тому, чем он есть в настоящее время.

methods: {
  toggleStatus() {
    if(this.isChecked) {
      // do sommething
    } else {
      // do something else
    }
    this.isChecked = !this.isChecked;
  }
}

Доступ к DOM с помощью $ refs

Что если вам абсолютно нужен доступ к DOM? Есть случаи, когда вам может понадобиться ссылка на элемент для выполнения какого -то типа манипуляций. Я видел, как это появилось во время работы со сторонними компонентами и при работе с компонентами родителей/ребенка.

Я собираюсь начать с очень простого примера, но в этом случае вы не должны использовать \ $ refs. Скажем, у вас была кнопка в вашем компоненте, и вы хотели получить доступ к ней, чтобы вы могли изменить текст. Вы можете назначить атрибут Ref к кнопке, а затем получить доступ к ней, используя $ refs объект.

methods: {
  onButtonClick() {
    const btn = this.$refs.myButton;
    btn.innerText = 'New Button Text'
  }
}

Практический пример с использованием $ refs в Vue

Опять же, это не самый практичный пример, потому что мы просто делаем то же самое, что и в нашем предыдущем примере. Как я уже говорил ранее, вы можете столкнуться с этой проблемой, когда работаете с компонентами родителей/ребенка. Для этого примера допустим, что у вас есть форма проверки, и в этом компоненте у вас есть дочерний компонент, называемый Customerform.vue .

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

В форме клиента мы затем назначим рефери для ввода имени.

Теперь в форме оформления заказа в нашем монтированном методе мы можем сосредоточиться на вводе имени формы клиента.

Просто небольшая заметка от VUE DOCUMATION Что вам нужно знать.

$ refs заполнены только после того, как компонент был сделан, и они не являются реактивными. Это предназначено только как люк побега для прямых манипуляций с детьми – вы должны избегать доступа к ссылкам $ из шаблонов или вычисленных свойств.

Вывод

Я хочу подчеркнуть, что вы не делаете ничего плохого, обращаяся к DOM в вашем приложении VUE. Я просто думаю, что в большинстве случаев есть лучший подход И я надеюсь, что этот пример смог показать это. Если вы знаете о хорошем случае использования для манипулирования DOM напрямую, пожалуйста, обратитесь ко мне и дайте мне знать. Как всегда…

Счастливого кодирования Дэн

Эта статья была впервые опубликована в моем блоге в https://www.danvega.dev/blog . Если вы нашли эту статью интересной, пожалуйста, подумайте Подписка на мою рассылку или следуя за мной на Твиттер .

Оригинал: “https://dev.to/therealdanvega/tips-for-vue-developers-avoid-directly-manipulating-the-dom-19mn”

Лучший подход

Доступ к DOM с помощью $ refs

Практический пример с использованием $ refs в Vue

Вывод

Читайте ещё по теме: