8 худших вопросов на собеседовании по Vue.js18.01.2019 10:47

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

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

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

Пример:

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

/* TestComponent.vue */

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

/* TestWrapper.vue */

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

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

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

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

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

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

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

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

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

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

/* TestComponent.vue */



 /* ... */

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

Ниже дан пример реализации. Он не учитывает некоторых моментов (как, например, изменение 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 (
      

        // Создаем элементы CustomColumn
        {defaultSlot}

        
          // Создаем хедер
          
            {columnsData.map(columnData => (
              
            ))}
          

          // Создаем строки таблицы
          {items.map(item => (
            
              {columnsData.map(columnData => (
                
              ))}
            
          ))}
        

                {columnData.label}
              

                  {columnData.createCell(item)}
                
      
    );
  },

  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 (
      

        {portalData.portalEl}
      
    );
  },

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

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

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

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

/* ItemView.vue */

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

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

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

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