Какие ответы интервьюер хочет услышать во время интервью (вопросы о каком-то вьюе)

Vue.js

предисловие

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

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

жизненный цикл vue (функция ловушки)

проблема

Пожалуйста, расскажите о функции жизненного цикла (функции хука) Vue.

описание проблемы

Прежде всего, о функции жизненного цикла, вообще мой первый вопрос заключается в следующем. Я думаю, что все, кто использует vue, должны быть ясны. Если этот вопрос является большим вопросом, я действительно не хочу продолжать.
Даже если английский не стандартный (я человек нестандартный, не то чтобы это проблема) необходимо четко прояснить ключевые моменты, где есть эд, а где нет эд, на самом деле очень критично, или его можно записать от руки, т.к. общеупотребительный Он создается и монтируется, так что первые 4 написать четко от руки не сложно, а последние 4 прекрасно без подробных пояснений. (Я практически никогда не использовал последние 4 в своей работе)
В каком цикле я могу получить данные данных в первый раз и в каком цикле я могу получить элемент dom в смонтированном в первый раз, если я не упомяну этот вопрос, я обычно буду продолжать спрашивать, пока он не даст эти два ответы.

ожидаемый ответ

beforeCreate, созданный (в это время следует объяснить, что данные, определенные в data, могут быть впервые получены в created), beforeMount, смонтированный (в это время следует объяснить, что рендеринг дерева dom завершен , и можно получить доступ к структуре dom), beforeUpdate, update, beforeDestroy, уничтожение

геттеры и сеттеры в вычисляемых

проблема

Поговорим о геттерах и сеттерах в вычислении.

описание проблемы

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

ожидаемый ответ

<!--直接复制的官网示例-->
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

смотреть объект слушателя

проблема

Как наблюдать за изменениями внутри объекта.

описание проблемы

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

ожидаемый ответ

Если вы отслеживаете только изменение свойства в obj, вы можете отслеживать его напрямую с помощью obj.key.

watch: {
    'obj.question': function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
      this.debouncedGetAnswer()
    }
  }

Если глубоко следить за всем объектом

watch: {
    obj: {
        handler: function (newQuestion, oldQuestion) {
          this.answer = 'Waiting for you to stop typing...'
          this.debouncedGetAnswer()
        },
        deep: true,
        immediate: true
    }
  }

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

Роль ключа цикла v-for

проблема

Зачем вам нужно добавлять ключ в цикл v-for?

описание проблемы

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

ожидаемый ответ

Рендеринг DOM Vue — это виртуальный DOM. Когда данные изменяются, алгоритм сравнения будет сравнивать только измененные части. Если порядок элементов данных изменен, Vue не будет перемещать элементы DOM, чтобы соответствовать изменениям элементов данных, но просто повторно используйте их здесь для каждого элемента и убедитесь, что он отображает каждый элемент, который был отрендерен по определенному индексу. Например: есть список, и мы вставили элемент в середину.Алгоритм сравнения будет повторно использовать предыдущий список по умолчанию и добавит один в конец.Если список имеет выбранный класс, при повторном использовании произойдет ошибка привязки Вместо того, чтобы следовать за исходным элементом, функция клавиши может дать ему логотип, чтобы состояние могло отображаться вместе с данными. (Эта часть является моим собственным общим пониманием, выражение не очень понятно, вы можете проверить документацию для деталей, эта статья не будет подробно описывать этот вопрос.)

$nextTick

проблема

Вы использовали $nextTick и каков эффект?

описание проблемы

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

ожидаемый ответ

Выполняет отложенный обратный вызов после завершения следующего цикла обновления DOM. Используйте этот метод сразу после изменения данных, чтобы получить обновленную модель DOM. (Пояснение на официальном сайте)
Проблема решена: иногда DOM необходимо использовать сразу после изменения данных.В это время полученная DOM все еще является DOM до обновления данных, что не может удовлетворить потребности.В это время используется $nextTick.

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

$set

проблема

Использовали ли вы $set в vue, зачем его использовать и какую проблему он решает?

описание проблемы

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

ожидаемый ответ

Добавьте свойство в реактивный объект и убедитесь, что это новое свойство также является реактивным и запускает обновление представления. Его необходимо использовать для добавления новых свойств к реактивным объектам, поскольку Vue не может обнаруживать обычные новые свойства (например, this.myObject.newProperty = 'hi') (официальный пример)

Насколько я понимаю, когда в объект в vue вносятся некоторые изменения, vue не отслеживает изменения и не может инициировать обновление представления.В настоящее время $set используется для запуска обновления, чтобы обновить представление до последней версии. данные.

Передача значений между компонентами

проблема

Расскажите о способе передачи значений между компонентами, все известные вам способы

описание проблемы

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

Я могу в основном ответить, отец сыну: props; сын отцу: $emit; брат: eventbus; vuex; некоторые будут говорить о sessionStorage и localStorage, параметрах маршрутизации (этот ответ на самом деле не то, что я хочу спросить, но вы также можете реализовать определенную передачу по значению)

Конкретное использование следующих методов передачи значений не описывается в этой статье.Эта ссылка представляет собой конкретное введение в передачу значений этих компонентов.

То, как вы не знаете ценность компонентов vue

ожидаемый ответ

  1. provide / inject
    Эту пару опций необходимо использовать вместе, чтобы позволить компоненту-предку внедрить зависимость во все его потомки, независимо от того, насколько глубока иерархия компонентов, и она всегда будет действовать, пока устанавливаются отношения восходящего и нисходящего потоков.
  2. Vue.observable
    Сделайте объект отзывчивым. Он используется внутри Vue для обработки объекта, возвращаемого функцией данных.
    Возвращенный объект можно использовать непосредственно в функциях рендеринга и вычисляемых свойствах, и он будет запускать соответствующие обновления, когда что-то изменится. Также может использоваться как минимальное межкомпонентное хранилище состояний для простых сценариев:
const state = Vue.observable({ count: 0 })

const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `count is: ${state.count}`)
  }
}
  1. $attrs
    Содержит привязки свойств (кроме класса и стиля), которые не распознаются (и не получаются) как свойства в родительской области. Когда компонент не объявляет никаких реквизитов, все привязки родительской области (кроме класса и стиля) включаются сюда и могут быть переданы внутренним компонентам через v-bind="$attrs" - очень полезно при создании высокоуровневых компонентов.
  2. $listeners
    Содержит прослушиватель событий v-on из родительской области (без декоратора .native). Его можно передать внутренним компонентам через v-on="$listeners" - очень полезно при создании компонентов более высокого уровня.
  3. props
  4. $emit
  5. eventbus
  6. vuex
  7. $parent / $children / ref
Категории