Предварительное интервью в конце года-Vue резюме

Все давно ждут! Обновление медленное, потому что я был занят в последнее время

Я только что закончил школу, чтобы пройти собеседование на стажировку с вопросом после собеседования на один год.Если ответ не очень хороший, пожалуйста, поправьте меня!
На домашней странице также есть html / css, JavaScript, вопросы для интервью es6 ... постоянно обновляются
(Это непросто собрать, пожалуйста, поставьте лайк перед просмотром, чтобы выработать хорошую привычку~)

• html/css адрес вопроса на собеседовании

• Адрес вопроса для интервью на JavaScript (очень внимательный)

• es6 адрес вопроса интервью

1. Что такое мввм?

MVVM — это сокращение от Model-View-ViewModel. mvvm - это дизайнерская мысль. Уровень модели представляет собой модель данных, в модели также может быть определена бизнес-логика модификации и работы с данными; представление представляет собой компонент пользовательского интерфейса, который отвечает за преобразование модели данных в пользовательский интерфейс для отображения, а модель представления представляет собой объект, который синхронизирует представление и модель.

В архитектуре MVVM нет прямой связи между View и Model, но через ViewModel.Взаимодействие между Model и ViewModel является двунаправленным, поэтому изменения данных View будут синхронизированы с Model, а изменения данных модели. Он также будет немедленно реагировать на представление.

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

2. В чем разница между mvvm и mvc?

Между mvc и mvvm нет большой разницы. Это все дизайнерская идея. Главное, что Controller в mvc превратился в viewModel в mvvm. mvvm в основном решает проблему, заключающуюся в том, что большое количество операций DOM в mvc снижает производительность рендеринга страниц, замедляет скорость загрузки и влияет на взаимодействие с пользователем. А когда Model часто меняется, разработчикам необходимо активно обновляться до View.

3. Каковы преимущества vue?

• низкое сцепление. Представление может быть изменено и модифицировано независимо от модели.Модель представления может быть привязана к различным "представлениям".При изменении представления модель может оставаться неизменной, а при изменении модели представление также может оставаться неизменным.
• Повторное использование. Вы можете поместить некоторую логику представления в ViewModel и позволить многим представлениям повторно использовать эту логику представления.
• Самостоятельное развитие. Разработчики могут сосредоточиться на бизнес-логике и разработке данных (ViewModel), дизайнеры могут сосредоточиться на дизайне страниц, используя Expression Blend, они могут легко проектировать интерфейс и генерировать XML-код.
• Тестируемый. Интерфейсы всегда было трудно тестировать, и теперь тесты можно писать для ViewModels.

4. Каков жизненный цикл vue? Понимание жизненного цикла vue?

• Какова роль жизненного цикла vue?

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

• Какие хуки срабатывают при загрузке первой страницы?

Ответ: Хуки beforeCreate, created, beforeMount, mount будут срабатывать при первой загрузке страницы.

• жизненный цикл

A: Всего он разбит на 8 этапов: до/после создания, до/после загрузки, до/после обновления, до/после уничтожения.

• До/после создания: на этапе beforeCreate элемент монтирования el экземпляра vue еще не создан.
• До/после загрузки: на этапе beforeMount $el и данные экземпляра vue инициализируются, но до монтирования они все еще являются виртуальными узлами dom, а data.message не был заменен. На этапе монтирования экземпляр vue монтируется, и data.message успешно обрабатывается.
• До/после обновления: при изменении данных запускаются методы beforeUpdate и updated.
• До/после уничтожения: после выполнения метода destroy изменения в данных больше не будут запускать периодическую функцию, указывая на то, что экземпляр vue был освобожден от отслеживания событий и привязки к dom в это время, но структура dom все еще существует.
• Кратко опишите, для каких сценариев подходит каждый цикл?

Ответ: Некоторые способы использования хуков жизненного цикла: : смонтировать элемент и обновить узел DOM : если данные обрабатываются единообразно, напишите здесь соответствующую функцию beforeDestroy : вы можете сделать окно подтверждения для подтверждения события остановки nextTick : управлять домом сразу после обновления данных arguments — это псевдомассив, интерфейс обхода отсутствует и не может быть пройден

5. Назовите как минимум 4 директивы Vue и их использование?

v-if: определить, следует ли скрывать; v-for: цикл данных; v-bind: класс: привязать атрибут; v-модель: реализовать двустороннюю привязку

6. Что такое vue-loader? Каковы преимущества его использования?

Загрузчик, который анализирует файлы .vue и преобразует template/js/style в модули js. Назначение: js может писать es6, стиль может быть scss или меньше, шаблон может добавлять jade и т.д.

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

• Родительские и дочерние компоненты передают значения

//父组件通过标签上面定义传值
<template>
   <Main :obj="data"></Main>
</template>
<script>
   //引入子组件
   import Main form "./main"

   exprot default{
       name:"parent",
       data(){
           return {
               data:"我要向子组件传递数据"
           }
       },
       //初始化组件
       components:{
           Main
       }
   }
</script>


//子组件通过props方法接受数据
<template>
   <div>{{data}}</div>
</template>
<script>
   exprot default{
       name:"son",
       //接受父组件传值
       props:["data"]
   }
</script>

• Дочерний компонент передает данные родительскому компоненту

//子组件通过$emit方法传递参数

<div id="app">
    <!-- 引用父组件 -->
    <son @func="getMsg"></son>
 
    <!-- 组件模板定义 -->
    <script type="x-template" id="son">
      <div>
        <input type="button" value="向父组件传值" @click="sendMsg" />
      </div>
    </script>
  </div>
 
  <script>
    // 子组件的定义方式
    Vue.component('son', {
      template: '#son', // 组件模板Id
      methods: {
        sendMsg() { // 按钮的点击事件
          this.$emit('func', 'OK'); // 调用父组件传递过来的方法，同时把数据传递出去
        }
      }
    });
 
    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getMsg(val){ // 子组件中，通过 this.$emit() 实际调用的方法，在此进行定义
          alert(val);
        }
      }
    });
  </script>

8. Как определить вложенную маршрутизацию?

В реальных проектах мы столкнемся с несколькими уровнями вложенных компонентов, но как реализовать вложенную маршрутизацию? Поэтому нам нужно использовать дочернюю конфигурацию в параметрах VueRouter, чтобы можно было хорошо реализовать вложенность маршрутизации. index.html, только с одним маршрутом выхода

<div id="app">
    <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
</div>

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

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
 
//引入两个组件
 
import home from "./home.vue"
import game from "./game.vue"
//定义路由
const routes = [
    { path: "/", redirect: "/home" },//重定向,指向了home组件
    {
        path: "/home", component: home,
        children: [
            { path: "/home/game", component: game }
        ]
    }
]
//创建路由实例
const router = new VueRouter({routes})
 
new Vue({
    el: '#app',
    data: {
    },
    methods: {
    },
    router
})
//home.vue，点击显示就会将子路由显示在出来，子路由的出口必须在父路由里面，否则子路由无法显示。

9. Перескакивать между маршрутами?

• Декларативный (переходы по табуляции)
• Программно (js jump) router.push('index')
• Ленивая загрузка (загрузка маршрутов по запросу) (общий тест)

require.ensure() предоставляется в веб-пакете для реализации загрузки по требованию. В прошлом маршруты импортировались путем импорта, но они импортировались по определению константы.

• Метод введения без загрузки страницы по требованию:

import  home   from '../../common/home.vue'

• Метод введения загрузки страницы по запросу:

const  home = r => require.ensure( [], () => r (require('../../common/home.vue')))

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

Управление состоянием во фреймворке vue. Внесите store в main.js и выполните инжект. Создал новое хранилище каталогов, ...... экспорт. Сценарии: В одностраничном приложении состояние между компонентами. Воспроизведение музыки, статус входа, добавить в корзину

// 新建 store.js
import vue from 'vue'
import vuex form 'vuex'
vue.use(vuex)
export default new vuex.store({
    //...code
})
 
//main.js
import store from './store'
...

11. Какие навигационные крючки есть у vue-router?

три

• глобальный навигационный хук

router.beforeEach(to, from, next),

router.beforeResolve(to, from, next),

router.afterEach(to, from )

• Крючки внутри компонента

beforeRouteEnter,

beforeRouteUpdate,

beforeRouteLeave

• Индивидуальная маршрутизация эксклюзивных компонентов

beforeEnter

12. Какие есть способы настройки инструкций (v-check, v-focus), какие функции хуков у него есть, какие параметры функций хуков есть?

全局定义指令：在 vue 对象的 directive 方法里面有两个参数, 一个是指令名称, 另一个是函数。

组件内定义指令：directives

钩子函数: bind(绑定事件出发)、inserted(节点插入时候触发)、update(组件内相关更新)

钩子函数参数： el、binding

13. Каков принцип двусторонней привязки Vue (общий тест)

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

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

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

Шаг 3: Подписчик Watcher является связующим звеном между Observer и Compile.Основные моменты:

• Добавьте себя к подписчику свойства (dep) при его создании
• Он должен иметь сам метод update()
• Когда свойство изменяет уведомление dep.notice(), оно может вызвать свой собственный метод update() и вызвать привязку обратного вызова в компиляции, после чего оно будет успешным.
• Шаг 4: MVVM служит точкой входа для привязки данных, интегрирует Observer, Compile и Watcher, отслеживает изменения данных собственной модели через Observer, анализирует и компилирует инструкции шаблона через Compile и, наконец, использует Watcher для установления связи между Observer и Compile. Коммуникационный мост для достижения изменения данных -> обновление представления, изменение взаимодействия просмотра (ввод) -> эффект двусторонней привязки изменения модели данных.

14. Какие свойства есть у vuex?

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

15. В чем особенность магазина vuex

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

16. Какова геттерная функция vuex

• Геттер может выполнять вычислительные операции над состоянием, которое является вычисляемым свойством хранилища.
• Хотя вычисляемые свойства также можно выполнять внутри компонентов, геттеры можно повторно использовать между несколькими компонентами.
• Если состояние используется только в одном компоненте, геттеры можно не указывать.

17. Какова особенность мутации vuex

• Действие похоже на мутацию, разница в том, что действие вызывает мутацию, а не непосредственное изменение состояния.
• action может содержать любое асинхронное действие
• Если он повторно используется в других местах, приведите запрос в действие для упрощения повторного использования и оберните его как обещание вернуться.

18. Какие проблемы не использовать vuex

• Ремонтопригодность упадет, вам нужно изменить данные, вы должны поддерживать 3 места
• Читаемость падает, потому что вы не можете сказать, откуда берутся данные в компоненте.
• Увеличение связанности и большое количество загрузок и отправок значительно увеличат связанность.Первоначально Vue использовал компонент для уменьшения связанности.Теперь он используется таким образом, что противоречит первоначальному замыслу компонентизации.

19. Принцип Vuex

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

Общая идея Vuex родилась из потока, но его метод реализации полностью использует собственный адаптивный дизайн Vue.Мониторинг зависимостей и сбор зависимостей относятся к захвату прокси-сервером Vue метода получения набора свойств объекта. Последнее предложение завершает принцип работы vuex.Хранилище в vuex по сути представляет собой скрытый компонент vue без шаблона;

20. Как Vuex различает, было ли состояние изменено напрямую извне или изменено с помощью метода мутации?

Единственный способ изменить состояние в Vuex — выполнить метод commit('xx', payload).Нижний уровень устанавливает переменную флага _committing в значение true, выполнив this._withCommit(fn), после чего состояние можно изменить. После модификации необходимо восстановить переменную _committing. . Хотя внешняя модификация может напрямую изменять состояние, она не изменяет флаг _committing, поэтому, пока вы наблюдаете за состоянием и решаете, истинно ли значение _committing при изменении состояния, вы можете судить о законности модификации.

21. Что такое аксиомы? как пользоваться? Опишите процесс его использования для реализации функции входа в систему

axios — это модуль, который запрашивает фоновые ресурсы. npm и аксиомы -S

Если вы отправляете междоменный запрос, вам необходимо настроить его в конфигурационном файле config/index.js

22. Следует ли писать код ajax-запроса в vue в методах компонента или в действии vuex

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

23. Как заставить CSS работать только в текущем компоненте?

Измените стиль текущего компонента на стиль с ограниченной областью действия.

24. В чем сходство и различие инструкций v-show и v-if?

• Инструкция v-show предназначена для отображения или скрытия элемента путем изменения свойства displayCSS элемента.
• Директива v-if напрямую уничтожает и перестраивает DOM для отображения и скрытия элементов.

• html/css адрес вопроса на собеседовании

• Адрес вопроса для интервью на JavaScript (очень внимательный)

• es6 адрес вопроса интервью

напиши в конце

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

Вопросы интервью постоянно обновляются
Коллекция всегда полезная, спасибо~