8 худших вопросов на собеседовании по Vue.js

В консоли мы увидим только цифру 4.

В хуке beforeCreate еще не создан сам инстанс, watcher здесь работать не будет.

Watcher срабатывает на изменения в хуке created, beforeMount и mounted. Так как все эти хуки вызываются во время одного тика, Vue вызовет watcher один раз в самом конце, со значением 4.

Vue отпишется от наблюдения за изменением переменной перед вызовом хуков beforeDestroy и destroyed, поэтому 5 и 6 не попадут в консоль.

Prop с типом Boolean отличается от всех остальных тем, что во Vue для него есть специальное приведение типов.

Если в качестве параметра будет передана пустая строка или название самого prop'а в kebab-case, то Vue преобразует это в true.

Пример:

У нас есть файл с Boolean prop'ом:

/* TestComponent.vue */

<template>
  <div v-if="canShow">
    I'm TestComponent
  </div>
</template>

<script>
export default {
  props: {
    canShow: {
      type: Boolean,
      required: true,
    },
  },
};
</script>

Ниже показаны все валидные варианты использования компонента TestComponent.

/* TestWrapper.vue */

<template>
  <div>
    <!-- В этом случае canShow будет равен true внутри TestComponent -->
    <TestComponent canShow="" />

    <!-- Этот пример аналогичен предыдущему, vue-template-compiler выставит пустую строку для нашего prop'а -->
    <TestComponent canShow />

    <!-- Тут canShow тоже равен true -->
    <TestComponent canShow="can-show" />
  </div>
</template>

<script>
import TestComponent from 'path/to/TestComponent';

export default {
  components: {
    TestComponent,
  },
};
</script>

Проблема в том, что массив внутри $refs может идти не в том порядке, как и оригинальный массив (ссылка на issue). То есть, может произойти такая ситуация: кликаем на кнопку третьего элемента списка, а на консоль выводится dom-элемент второго.

Такое происходит только тогда, когда в массиве часто изменяются данные.

Методы решения написаны в issue на GitHub'е:

1. Создавать уникальный ref для каждого элемента

<template>
  <div>
    <div
      v-for="(file, idx) in files"
      :key="file.id"
      :ref="`file_${idx}`"
    >
      {{ file.name }}

      <button @click="logDOMElement(idx)">
        Log DOM element
      </button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState('files'),
  },

  methods: {
    logDOMElement(idx) {
      console.log(this.$refs[`file_{idx}`]);
    },
  },
};
</script>

2. Дополнительный аттрибут

<template>
  <div>
    <div
      v-for="(file, idx) in files"
      :key="file.id"
      :data-file-idx="idx"
    >
      {{ file.name }}

      <button @click="logDOMElement(idx)">
        Log DOM element
      </button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState('files'),
  },

  methods: {
    logDOMElement(idx) {
      const fileEl = this.$el.querySelector(`*[data-file-idx=${idx}]`);

      console.log(fileEl);
    },
  },
};
</script>

Проблема здесь возникает из-за особенностей поиска различий Virtual DOM'ов во Vue.

В самом начале наш Virtual DOM выглядит так:

После клика на кнопку он выглядит так:

Vue пытается сопоставить старый Virtual DOM с новым, чтобы понять, что нужно удалить и добавить:

Удаленные элементы перечеркнуты красным, созданные — выделены зеленым

Vue не смог найти компонент TestMount, поэтому пересоздал его.

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

Чтобы пофиксить проблему, достаточно поставить атрибут key к div'у с компонентом TestMounted:

/* TestComponent.vue */

<template>
  <div>
    <!-- ... -->
    <div key="container">
      <TestMount />
    </div>
    <!-- ... -->
  </div>
</template>

 /* ... */

Теперь Vue сможет однозначно сопоставить нужные элементы Virtual DOM'ов.

Основная идея состоит в том, чтобы в компоненте CustomColumn передать все данные компоненту CustomTable, а дальше он уже сам все срендерит.

Ниже дан пример реализации. Он не учитывает некоторых моментов (как, например, изменение label), но основной принцип должен быть понятен.

/* CustomColumn.js */

export default {
  render() {
    return null;
  },

  props: {
    label: {
      type: String,
      required: true,
    },
  },

  mounted() {
    // Передаем в компонент CustomTable необходимые данные
    this.$parent.setColumnData({
      label: this.label,
      createCell: this.$scopedSlots.default,
    });
  },
};

/* CustomTable.js */
/* Использется JSX, так как в template не получится использовать метод createCell, переданный из CustomColumn.js */

export default {
  render() {
    const { columnsData, items } = this;
    const { default: defaultSlot } = this.$slots;

    return (
      <div>
        // Создаем элементы CustomColumn
        {defaultSlot}

        <table>
          // Создаем хедер
          <tr>
            {columnsData.map(columnData => (
              <td key={columnData.label}>
                {columnData.label}
              </td>
            ))}
          </tr>

          // Создаем строки таблицы
          {items.map(item => (
            <tr>
              {columnsData.map(columnData => (
                <td key={columnData.label}>
                  {columnData.createCell(item)}
                </td>
              ))}
            </tr>
          ))}
        </table>
      </div>
    );
  },

  props: {
    items: {
      type: Array,
      required: true,
    },
  },

  data() {
    return {
      columnsData: [],
    };
  },

  methods: {
    setColumnData(columnData) {
      this.columnsData.push(columnData);
    },
  },
};

Для создания портала нужно реализовать три объекта:

• Хранилище данных о порталах
• Компонент Portal, который добавляет данные в хранилище
• Компонент PortalTarget, который извлекает данные из хранилища и отображает их

/* dataBus.js */
/* Файл содержит реактивное хранилище данных */

import Vue from 'vue';

const bus = new Vue({
  data() {
    return {
      portalDatas: [],
    };
  },

  methods: {
    setPortalData(portalData) {
      const { portalDatas } = this;

      const portalDataIdx = portalDatas.findIndex(
        pd => pd.id === portalData.id,
      );

      if (portalDataIdx === -1) {
        portalDatas.push(portalData);

        return;
      }

      portalDatas.splice(portalDataIdx, 1, portalData);
    },

    removePortalData(portalDataId) {
      const { portalDatas } = this;

      const portalDataIdx = portalDatas.findIndex(
        pd => pd.id === portalDataId,
      );

      if (portalDataIdx === -1) {
        return;
      }

      portalDatas.splice(portalDataIdx, 1);
    },

    getPortalData(portalName) {
      const { portalDatas } = this;

      const portalData = portalDatas.find(pd => pd.to === portalName);

      return portalData || null;
    },
  },
});

export default bus;

/* Portal.vue */
/* Этот компонент передает данные в dataBus */

import dataBus from './dataBus';

let currentId = 0;

export default {
  props: {
    to: {
      type: String,
      required: true,
    },
  },

  computed: {
    // Уникальный id компонента.
    // Нужен для идентификации данных в dataBus
    id() {
      return currentId++;
    },
  },

  render() {
    return null;
  },

  created() {
    this.setPortalData();
  },
 
  // Подхватываем изменение слотов
  updated() {
    this.setPortalData();
  },

  methods: {
    setPortalData() {
      const { to, id } = this;
      const { default: portalEl } = this.$slots;

      dataBus.setPortalData({
        to,
        id,
        portalEl,
      });
    },
  },

  beforeDestroy() {
    dataBus.removePortalData(this.id);
  },
};

/* PortalTarget.vue */
/* Компонент извлекает и отображает данные */

import dataBus from './dataBus';

export default {
  props: {
    name: {
      type: String,
      required: true,
    },
  },

  render() {
    const { portalData } = this;

    if (!portalData) {
      return null;
    }

    return (
      <div class="portal-target">
        {portalData.portalEl}
      </div>
    );
  },

  computed: {
    portalData() {
      return dataBus.getPortalData(this.name);
    },
  },
};

Данное решение не поддерживает изменение атрибута to, не поддерживает анимации через transition и не имеет поддержки дефолтных значений, как portal-vue. Но общая идея должна быть понятна.

Чтобы избежать изменения свойств на реактивные, надо заморозить объект перед добавлением внутрь Vue с помощью метода Object.freeze.

Vue проверит, заморожен ли объект с помощью метода Object.isFrozen. И если это так, то Vue не станет добавлять реактивные геттеры и сеттеры к свойствам объекта, так как их в любом случае невозможно изменить. При очень больших объектах эта оптимизация помогает сохранить до нескольких десятков миллисекунд.

Оптимизированный компонент будет выглядеть так:

/* ItemView.vue */

<template>
  <!-- ... -->
</template>

<script>
import getItemFromApi from 'path/to/getItemFromApi';

export default {
  /* .... */

  async mounted() {
    const item = await getItemFromApi();
    Object.freeze(item);

    this.item = item;
  },
};
</script>

Object.freeze замораживает только свойства самого объекта. Так что, если объект содержит в себе вложенные объекты, их тоже необходимо заморозить.

Проблема в том, что после первого клика на кнопку Vue требуется некоторое время, чтобы обновить DOM для пользователя и убрать кнопку. Поэтому пользователь иногда может кликнуть два раза. Метод logAndClean отработает первый раз нормально, а второй раз крашнется, так как не сможет получить свойство value.

Я постоянно вижу такую проблему в трекере ошибок, особенно часто на дешевых мобильниках за 4-5к рублей.

Чтобы избежать ее, просто добавьте проверку на существование item в начале функции:

<template>
  <!-- ... -->
</template>

<script>
export default {
  /* ... */

  methods: {
    logAndClean() {
      const { item } = this;

      if (!item) {
        return;
      }

      console.log(item.value);

      this.item = null;
    },
  },
};
</script>

Чтобы воспроизвести баг, можете перейти в песочницу с примером, выставить максимальный троттлинг CPU и быстро-быстро покликать на кнопку. У меня, например, получилось.