Компания требует использования фреймворка vue Какие вопросы будут задавать на собеседовании?

Если вы новичок, изучающий фронтенд-разработку, или программист, много лет занимающийся кодированием, вы должны знать Vue.js, один из самых популярных интерфейсных фреймворков. Начать работу с ним проще, чем с React и Angular, и, возможно, это одна из причин, по которой многие новички выбирают vue.

Мы видим, что многие рекрутеры говорят о освоении проектов разработки vue, так что же спросят на собеседовании? Не волнуйтесь, ниже приведен довольно полный буклет анализа высокочастотных тестовых вопросов Vue, который я составил для вас.

Об авторе: koala, сосредоточив внимание на совместном использовании полного стека технологий Node.js, от JavaScript до Node.js, до серверной базы данных, я желаю вам стать отличным старшим инженером Node.js. [Руководство по развитию программиста] Автор, блог Github с открытым исходным кодомGitHub.com/koala-co Nth…

Понимание МВВМ

MVVMэто сокращение от Model-View-ViewModelModel: представляет модель данных, а бизнес-логика модификации и работы с данными также может быть определена в модели. Мы можем назвать модель уровнем данных, потому что она заботится только о самих данных, а не о каком-либо поведении.View: Пользовательский интерфейс. Когда ViewModel обновляет модель, она будет обновлена до View через привязку данных.ViewModel: На уровне бизнес-логики, какие данные нужны View, и ViewModel должна предоставлять эти данные; если View имеет определенные операции, ViewModel должна реагировать на эти операции, поэтому можно сказать, что это Model for View. Описание: шаблон MVVM упрощает интерфейс и бизнес-зависимости, а также решает проблему частого обновления данных. При использовании MVVM используется технология двусторонней привязки, так что при изменении модели ViewModel будет автоматически обновляться, а при изменении ViewModel автоматически будет изменяться и View.

Каковы наиболее часто используемые инструкции в разработке

v-model: обычно используется для выражения ввода, легко добиться двусторонней привязки элементов управления формы и данных.
v-html: обновить innerHTML элемента
v-showиv-if: Условный рендеринг, обратите внимание на разницу между двумя

При использовании v-if, если значение равно false, страница не будет создана с этим тегом html. v-show означает, что независимо от значения true или false элемент html будет существовать, но отображение в CSS отображается или скрывается

v-on : click: может быть сокращено как @click, @ связывает событие. Если событие срабатывает, вы можете указать обработчик события
v-for: отображать элемент или блок шаблона несколько раз на основе исходных данных.
v-bind: Когда значение выражения изменяется, быстро применяйте связанные эффекты к DOM.

грамматика:v-bind:title="msg"Сокращение::title="msg"

Уточните, пожалуйста, ваше понимание жизненного цикла vue.

Жизненный цикл vue делится на 8 этапов: до/после создания, до/после загрузки, до/после обновления, до/после уничтожения.

beforeCreate(перед созданием) элемент монтирования экземпляра vue$elи объекты данныхdataобаundefined, еще не инициализирован
created(после создания) сделаноdataинициализация данных,elне инициализирован
beforeMount(перед загрузкой) экземпляр vue$elиdataинициализируются, и соответствующая функция рендеринга вызывается в первый раз. Пример завершил следующую конфигурацию: скомпилируйте шаблон, сгенерируйте html из данных и шаблон в данных. Обратите внимание, что HTML-код еще не смонтирован на странице.
mounted(после загрузки) вelВновь созданныйvm.$elЗамените его и вызовите после того, как он будет смонтирован на экземпляре. Экземпляр завершил следующую конфигурацию: скомпилирован с вышеуказаннымhtmlЗамена контентаelсвойство указывает наDOMобъект. Завершите рендеринг html в шаблоне на html-странице. Взаимодействие Ajax во время этого процесса
beforeUpdate(перед обновлением) Вызывается перед обновлением данных, перед повторным рендерингом и исправлением виртуального DOM. Дальнейшие изменения состояния могут быть сделаны в этом хуке без запуска дополнительного процесса повторного рендеринга.
updated(после обновления) Вызывается после повторного рендеринга и исправления виртуальной модели DOM из-за изменений данных. При вызове DOM компонента обновляется, поэтому можно выполнять операции, зависящие от DOM. Однако в большинстве случаев следует избегать изменения состояния в течение этого времени, так как это может привести к бесконечному циклу обновлений. Этот хук не вызывается во время рендеринга на стороне сервера.
beforeDestroy(перед уничтожением) Вызывается перед уничтожением экземпляра. Экземпляр по-прежнему полностью доступен.
destroyed(после уничтожения) Вызывается после уничтожения экземпляра. После вызова все прослушиватели событий будут удалены, а все дочерние экземпляры уничтожены. Этот хук не вызывается во время рендеринга на стороне сервера.

В чем принцип двусторонней привязки данных в Vue

Vue.js использует метод захвата данных в сочетании с режимом издатель-подписчик, перехватывает установщик и получатель каждого свойства через Object.defineProperty(), публикует сообщения подписчикам при изменении данных и запускает соответствующий обратный вызов мониторинга. Для конкретных шагов реализации, если вы заинтересованы, вы можете взглянуть на:

Когда обычный объект Javascript передается экземпляру Vue в качестве его параметра данных, Vue будет проходить его свойства, используя Object.defineProperty для добавления как сеттеров, так и геттеров.В этом случае присвоение значения этому объекту вызовет сеттер, тогда вы можете отслеживать изменения данных
Compile анализирует инструкции шаблона, заменяет переменные в шаблоне данными, затем инициализирует и отображает представление страницы, привязывает функцию обновления к узлу, соответствующему каждой инструкции, и добавляет подписчиков, которые отслеживают данные. уведомление и вид обновления
Подписчик Watcher — это мост между Observer и Compile, главное: 1. Добавьте себя к подписчику свойства (dep), когда вы создаете свой экземпляр 2. Он должен иметь сам метод update() 3. Когда свойство изменяет уведомление dep.notice(), оно может вызвать свой собственный метод update() и вызвать связанный обратный вызов в компиляции, после чего оно будет успешным.
MVVM, как точка входа для привязки данных, интегрирует Observer, Compile и Watcher, отслеживает изменения данных собственной модели через Observer, анализирует и компилирует инструкции шаблона через Compile и, наконец, использует Watcher для создания коммуникационного моста между Observer и Compile для получения данных. изменение -> обновление просмотра; изменение взаимодействия просмотра (ввод) -> эффект двусторонней привязки изменения модели данных

//vue实现数据双向绑定的原理就是用Object.defineproperty()重新定义（set方法）对象设置属性值和（get方法）获取属性值的操纵来实现的。
//Object.property()方法的解释：Object.property(参数1，参数2，参数3)  返回值为该对象obj
//其中参数1为该对象（obj），参数2为要定义或修改的对象的属性名，参数3为属性描述符，属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。这两种对象只能选择一种使用，不能混合使用。而get和set属于存取描述符对象的属性。
//这个方法会直接在一个对象上定义一个新属性或者修改对象上的现有属性，并返回该对象。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div id="myapp">
        <input v-model="message" /><br>
        <span v-bind="message"></span>
    </div>
    <script type="text/javascript">
        var model = {
            message: ""
        };
        var models = myapp.querySelectorAll("[v-model=message]");
        for (var i = 0; i < models.length; i++) {
            models[i].onkeyup = function() {
                model[this.getAttribute("v-model")] = this.value;
            }
        }
        // 观察者模式 / 钩子函数
        // defineProperty 来定义一个对象的某个属性
        Object.defineProperty(model, "message", {
            set: function(newValue) {
                var binds = myapp.querySelectorAll("[v-bind=message]");
                for (var i = 0; i < binds.length; i++) {
                    binds[i].innerHTML = newValue;
                };
                var models = myapp.querySelectorAll("[v-model=message]");
                for (var i = 0; i < models.length; i++) {
                    models[i].value = newValue;
                };
                this.value = newValue;
            },
            get: function() {
                return this.value;
            }
        })
</script>
</body>
</html>

Преимущества прокси по сравнению с defineProperty

Есть три основные проблемы с Object.defineProperty():

Не могу отслеживать изменения массива
Каждое свойство объекта должно быть пройдено
Вложенные объекты должны быть глубоко пройдены

Прокси был официально добавлен в спецификацию ES2015 и имеет следующие особенности:

Для объектов: для всего объекта, а не свойства объекта, поэтому нет необходимости проходить ключи. Это решает вторую проблему с Object.defineProperty() выше.
Поддержка массивов: прокси не нужно перегружать методы массивов, избавляет от многих хаков, уменьшает объем кода и снижает затраты на обслуживание, а стандарт лучше.

Помимо двух вышеперечисленных пунктов, Proxy также имеет следующие преимущества:

Второй параметр Proxy может иметь 13 методов перехвата, что богаче, чем Object.defineProperty().
В качестве нового стандарта Proxy был сфокусирован и оптимизирован производителями браузеров, в отличие от Object.defineProperty(), который является существующим старым методом.

Какие виды навигационных охранников есть у vue-router?

глобальная гвардия
Эксклюзивная защита маршрутизации
Ограждения внутри компонентов маршрутизации

1. Глобальная гвардия

vue-router имеет три охранника по всему миру:

router.beforeEach global front guard перед входом в маршрут
router.beforeResolve глобальная защита разрешения (2.5.0+), вызываемая после вызова beforeRouteEnter
router.afterEach глобальный почтовый хук после ввода маршрута

Инструкции:

 // main.js 入口文件
    import router from './router'; // 引入路由
    router.beforeEach((to, from, next) => { 
      next();
    });
    router.beforeResolve((to, from, next) => {
      next();
    });
    router.afterEach((to, from) => {
      console.log('afterEach 全局后置钩子');
    });

2. Эксклюзивная защита маршрутизации

Если вы не хотите настраивать защиту глобально, вы можете настроить защиту индивидуально для определенных маршрутов:

const router = new VueRouter({
      routes: [
        {
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) => { 
            // 参数用法什么的都一样,调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖
            // ...
          }
        }
      ]
    })

3. Охранники внутри компонента маршрутизации

beforeRouteEnter вызывается после эксклюзивной защиты маршрута перед входом в маршрутне можетПолучить экземпляр компонентаthis, экземпляр компонента не создан
beforeRouteUpdate (2.2) Когда маршрут повторно использует один и тот же компонент, он вызывается при изменении текущего маршрута, но компонент повторно используется для доступа к экземпляру компонента.this
beforeRouteLeave вызывается, когда навигация покидает соответствующий маршрут компонента при выходе из текущего маршрута, и можно получить доступ к экземпляру компонента.this

Реализация маршрутизации Vue: режим хеширования и режим истории

хэш-режим:

В браузере символ "#", символы после # и # называются хешем, и читаются они с помощью window.location.hash; Возможности: Хотя хеш находится в URL-адресе, он не включается в HTTP-запрос, используется для управления действиями браузера и бесполезен для безопасности сервера.Хэш не перезагружает страницу. В хеш-режиме в запрос будет включено только содержимое перед символом хэша, напримерhttp://www.xiaogangzai.com, так что для бэкенда, даже если маршрут не полностью пройден, ошибка 404 возвращаться не будет.

режим истории:

history использует новые функции HTML5 и предоставляет два новых метода: pushState(), replaceState() может изменять стек истории браузера, а событие popState отслеживает изменения состояния. В режиме истории внешний URL-адрес должен совпадать с URL-адресом, который фактически инициирует запрос к серверной части, напримерhttp://www.xxx.com/items/id. Бэкэнд вернет ошибку 404, если ему не хватает обработки маршрута для /items/id. Официальный сайт Vue-Router описывает это так: «Однако, чтобы хорошо играть в этом режиме, ему также нужна поддержка фоновой конфигурации… Итак, вам нужно добавить ресурс-кандидат, который покрывает все ситуации на стороне сервера: если URL-адрес не соответствует никаким статическим ресурсам. Он должен возвращать ту же страницу index.html, от которой зависит ваше приложение».

Связь по значению между компонентами

Существует три типа связи между компонентами: родитель-потомок, потомок-отец и связь между одноуровневыми компонентами.

1. Родительский компонент передает значение дочернему компоненту

использоватьprops, родительский компонент может использоватьpropsПередайте данные дочерним компонентам.

Шаблон родительского компонента vue Father.vue:

<template>
    <child :msg="message"></child>
</template>

<script>
import child from './child.vue';
export default {
    components: {
        child
    },
    data () {
        return {
            message: 'father message';
        }
    }
}
</script>

Шаблон vue дочернего компонента child.vue:

<template>
    <div>{{msg}}</div>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    }
}
</script>

2. Дочерний компонент взаимодействует с родительским компонентом

Родительский компонент передает метод события дочернему компоненту, дочерний компонент запускает событие через $emit и вызывает обратно родительский компонент.

Шаблон родительского компонента vue Father.vue:

<template>
    <child @msgFunc="func"></child>
</template>

<script>
import child from './child.vue';
export default {
    components: {
        child
    },
    methods: {
        func (msg) {
            console.log(msg);
        }
    }
}
</script>

Шаблон vue дочернего компонента child.vue:

<template>
    <button @click="handleClick">点我</button>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    },
    methods () {
        handleClick () {
            //........
            this.$emit('msgFunc');
        }
    }
}
</script>

3. Коммуникация между неродительско-дочерними, родственными компонентами

Устарело в vue2 dispatch和 широковещательные методы для трансляции и распространения событий. Вы можете использовать props и $emit() в родительских и дочерних компонентах. Как реализовать связь между неродительскими и дочерними компонентами, вы можете использовать экземпляр экземпляра vue Bus в качестве среды и ввести Bus в одноуровневые компоненты, которым необходимо взаимодействовать друг с другом, а затем реализовать связь и передачу параметров с помощью вызывая запуск и мониторинг событий шины соответственно. Bus.js может быть таким:

import Vue from 'vue'
export default new Vue()

Познакомьте Bus.js с компонентами, которые должны взаимодействовать:

<template>
	<button @click="toBus">子组件传给兄弟组件</button>
</template>

<script>
import Bus from '../common/js/bus.js'
export default{
	methods: {
	    toBus () {
	        Bus.$emit('on', '来自兄弟组件')
	    }
	  }
}
</script>

Другой компонент также импортирует Bus.js и прослушивает событие on в функции ловушки.

import Bus from '../common/js/bus.js'
export default {
    data() {
      return {
        message: ''
      }
    },
    mounted() {
       Bus.$on('on', (msg) => {
         this.message = msg
       })
     }
   }

Разница между Vue, Angular и React?

Версии постоянно обновляются, и следующие отличия могут быть неверными. И я использую в своей работе только vue, я не очень хорошо знаком с angular и реагировать

Разница между Vue и AngularJS

Angular разработан с использованием TypeScript, тогда как Vue может использовать javascript или TypeScript.
AngularJS полагается на грязные проверки данных, поэтому чем больше наблюдателей, тем медленнее он работает; Vue.js использует наблюдения на основе отслеживания зависимостей и использует асинхронные обновления очереди, все данные запускаются независимо.
Сообщество AngularJS идеально, а стоимость обучения Vue невелика.

Разница между Vue и React

Компоненты Vue делятся на глобальную регистрацию и локальную регистрацию.В реакции соответствующие компоненты импортируются, а затем ссылаются на них в шаблоне;
Пропсы могут динамически изменяться, а подкомпоненты обновляться в режиме реального времени.В React официально рекомендуется, чтобы пропсы были как чистые функции, с согласованным вводом и выводом, и не рекомендуется менять представления через пропсы;
Дочерний компонент обычно вызывает опцию props явно, чтобы объявить данные, которые он ожидает получить. В реакции это не обязательно, а в двух других есть механизм проверки реквизита;
Каждый экземпляр Vue реализует интерфейс событий для облегчения связи между родительскими и дочерними компонентами.В небольших проектах нет необходимости внедрять механизм управления состоянием, и react должен реализовать его сам;
Распространяйте содержимое с помощью слотов, что позволяет смешивать содержимое родительского компонента с собственным шаблоном дочернего компонента;
Существует больше систем инструкций, так что шаблон может выполнять более богатые функции, в то время как React может использовать только синтаксис JSX;
Vue добавляет вычисляемый и наблюдаемый синтаксический сахар, но в React вам нужно написать набор логики для его достижения;
Идея реакции вся в js, а html генерируется через js, поэтому jsx спроектирован, а js используется для работы css, styled-component, jss сообщества и т.д. css, js вместе, использование Для соответствующих методов обработки Vue имеет однофайловый компонент, который может записывать html, css и js в один файл, а html предоставляет механизм шаблонов для его обработки.
React делает очень мало вещей, и многие из них оставлены сообществу.Многие вещи в Vue встроены, что действительно удобно писать.Например, combReducer of redux соответствует модулям vuex, например, reselect соответствует getter и vue компоненты vuex.Вычисляемая мутация vuex — это исходные данные, которые изменяются напрямую, в то время как редуктор редукса возвращает совершенно новое состояние, поэтому редукс объединяет неизменяемые для оптимизации производительности, а vue в этом не нуждается.
Общая идея реакции функциональна, поэтому рекомендуются чистые компоненты, данные неизменяемы, и поток данных односторонний.Конечно, это можно сделать и в двусторонних местах.Например в сочетании с redux-form , горизонтальное разделение компонентов обычно выполняется через компоненты высокого уровня. А vue — это переменная данных, двусторонняя привязка, декларативное написание, а миксин во многих случаях используется для горизонтального разделения компонентов vue.

что такое векс? как пользоваться? В каких функциональных сценариях он используется?

Vuex — это склад, а на складе много объектов. Где состояние — это место хранения источника данных, соответствующее данным в общем объекте vue.
Данные, хранящиеся в состоянии, являются адаптивными. Компонент vue считывает данные из хранилища. Если данные в хранилище изменяются, компоненты, которые зависят от этих данных, также будут обновлены.
Он сопоставляет глобальное состояние и геттеры с вычисляемыми свойствами текущего компонента через mapState.

Использование vuex объясняется с помощью изображения, предоставленного официальным лицом:

Vuex имеет 5 свойств: состояние, геттер, мутация, действие, модуль;

state

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

mutations

Методы, определенные мутациями, динамически изменяют состояние или данные в хранилище Vuex.

getters

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

action

Действия можно понимать как метод асинхронной обработки данных путем изменения метода обработки данных в мутациях, то есть просто для асинхронной обработки данных. Уровень представления отправляет действия через store.dispath.

Vuex обычно используется для управления состоянием приложения в средних и крупных одностраничных веб-приложениях.Для некоторых небольших приложений с относительно простыми отношениями между компонентами нет необходимости использовать vuex, поскольку свойства или события компонента могут быть используется для завершения родительско-дочерней связи между компонентами, vuex больше используется для решения межкомпонентной связи и централизованного хранения данных в качестве центра обработки данных.

Используйте Vuex для решения проблем связи между неродительскими и дочерними компонентами. Vuex реализует межкомпонентную связь, используя состояние в качестве центра обработки данных и состояние совместного использования каждого компонента.В настоящее время данные полностью независимы от компонентов.Поэтому размещение данных, совместно используемых между компонентами, в состоянии может эффективно решить межкомпонентную проблему. вложенность многоуровневых компонентов проблемы связи.
vuex как центр хранения данных Сам Vuex State имеет функцию «базы данных» при разработке одностраничных приложений, он может хранить данные, используемые в компоненте, в State, а логику чтения и записи данных инкапсулировать в Action. В настоящее время возникает проблема, какие данные обычно помещаются в состояние? В настоящее время существует два основных типа данных, которыми можно управлять с помощью vuex: 1. Глобальный доступ к данным между компонентами 2. Данные запрашиваются асинхронно через серверную часть Например, добавление в корзину, статус входа и т. д. может использовать Vuex для управления статусом данных.

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

Как при разработке изменить данные массива или объекта, но страница не обновляется?
Как отключить прокрутку полосы прокрутки после всплывающего окна vue?
Как правильно ссылаться на плагины jquery и jquery-ui в проекте vue

Путь стека технологий официальной учетной записи

Привет всем, я коала, автор официального аккаунта «Руководство по развитию программиста», эта статья представляет собой высокоуровневое объяснение функций [JS должен знать и должен знать серию]. В настоящее время работаю над продвинутым направлением инженера серверной части узла, присоединяйтесь к нам, чтобы учиться вместе!

Присоединяйтесь к нам