Vue вопросы интервью и ямы, встречающиеся в реальных проектах

написать впереди

Как упоминалось ранее, после преобразования внешнего интерфейса произошли технологические изменения.Небольшие программы и мобильные терминалы h5 предъявляют все более высокие требования к оптимизации производительности.Под влиянием метода объектно-ориентированного программирования внешний интерфейс в настоящее время является основной технологией. , Фреймворк Vue, React, Angular, Их модель, управляемая данными, модель MVVM, очень популярна, это одностраничное спа-приложение, компонентное мышление очень полезно для огромного веб-приложения для повышения скорости загрузки, сокращения операций Dom и затем наступает непрерывное обучение, и технические требования к техническим специалистам также начинают отдавать предпочтение vue, небольшим программам и публичным аккаунтам.Из-за популярности смартфонов приложения более популярны, чем веб-страницы, поэтому мы должны постоянно получать новые знания, иначе будут устранены.

Во время интервью неизбежно будут заданы вопросы о других знаниях, таких какes6,javascript,css3Я также подытожил, пожалуйста, переходите к деталям

Резюме точек знаний и вопросов интервью по грамматике ES6

Резюме вопросов для фронтенд-интервью и некоторый опыт собеседования

Вопросы об интервью с апплетом WeChat и подводные камни, возникшие в проекте

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

Принцип v-model здесь ограничен версиями ниже vue3.0, я слышал, что vue3.0 не используется.Object.defineProperty, Специфику еще нужно изучить, и я обновлю ее после того, как разберусь.

Шаг первый, расскажите о своем понимании MVVM?

• MVVM состоит из трех частей: Model, View и ViewModel.Слой Model представляет собой модель данных, в модели также может быть определена бизнес-логика модификации и работы с данными.View представляет собой компонент пользовательского интерфейса, который отвечает за преобразование модель данных в пользовательский интерфейс для отображения.ViewModel — это объекты Synchronize View и Model. В архитектуре MVVM нет прямой связи между View и Model, но через ViewModel.Взаимодействие между Model и ViewModel является двунаправленным, поэтому изменения данных View будут синхронизированы с Model, а изменения Данные модели будут синхронизированы, а также сразу отреагируют на представление. ViewModel связывает уровень представления и уровень модели через двустороннюю привязку данных, а синхронизация между представлением и моделью полностью автоматическая без вмешательства человека, поэтому разработчикам нужно сосредоточиться только на бизнес-логике, нет необходимости вручную манипулировать DOM, нет необходимости чтобы обратить внимание на синхронизацию состояния данных, комплексное обслуживание состояния данных полностью управляется MVVM.

Шаг 2, способ передачи параметров в маршрутизации vue

• router.js, за которым следует параметр конфигурации :id
• параметр метода запроса
• имя параметра метода
• Vue поставляется с тегами и тегами для передачи параметров.
• Подробнее см.Подробное объяснение 4 методов параметров маршрутизации Vue $router

Шаг 3, передача параметров между компонентами vue

• отец сыну реквизит
• сын к отцу это.
• Станция передачи eventHub не родительско-дочернего компонента this.$on
• Переменные, хранящиеся в состоянии vuex, состояние, измененное мутациями, действия, вызванные действиями (методами)
• Пожалуйста, обратитесь к конкретным параметрам передачи компонентов.Подробное объяснение параметров связи компонента «родитель-потомок» Vue2.0 и не-родитель-дочерний компонент
• Пожалуйста, обратитесь к vuex stroe для получения подробной информации.Принцип vuex, использование наступания на яму, промежуточный итог

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

Отвечать

• Первый — это глобальный навигационный хук (глобальная защита): router.beforeEach(to, from, next), который используется для оценки и перехвата перед прыжком.
• Второй тип: глобальная защита синтаксического анализаrouter.beforeResolve, защита разрешения вызывается после того, как все встроенные защиты и компоненты асинхронной маршрутизации разрешены до подтверждения навигации. (Новое в версии 2.5.0).
• Третий тип: охранники с отдельными маршрутамиbeforeEnter, который определяется во время настройки маршрутизации так же, как глобальная защита.
• Четвертое: охранники внутри компонентов. Определите защиту непосредственно внутри компонента маршрутизации, Ниже приводится введение в официальную документацию веб-сайта:

  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

Шаг пятый, пожалуйста, напишите несколько часто используемых инструкций vue

v-once、v-for、v-if、v-show、v-on,v-model

Шаг шестой, пожалуйста, подробно объясните жизненный цикл vue (2.0)?

Отвечать:

Шаг седьмой, что такое слот? И говорить о подробном использовании?

Отвечать: Официальный сайт Vue поясняет: slot slot, ------- (Vue реализует набор API для распространения контента, которые основаны на текущейПроект спецификации веб-компонентов,Буду<slot>Элементы служат выходами, которые несут распределенный контент. ) Вы запутались после прочтения? Во всяком случае, я запутался. Позвольте мне рассказать о моем собственном понимании: Слот предназначен для достижения действительно гибкого одностраничного компонента, а форма или запись для гибкого управления содержимым внутри компонента вне компонента — для вставки содержимого, необходимого в компоненте, в общедоступный компонент в виде слота. гибкое управление. При отображении компонента этот элемент будет заменен на «Ваш профиль». Слоты могут содержать любой код шаблона, включая HTML: см.vue NavBar с эффектом анимацииВот подробности<slot>метод использования.

Шаг восьмой, расскажите о своем понимании принципа адаптивности vue?

Отвечать: Давайте посмотрим на объяснение на официальном сайте: Когда вы передаете простой объект JavaScript экземпляру Vuedataвариант, Vue будет перебирать все свойства этого объекта и использоватьObject.definePropertyПревратите все эти свойства в геттеры/сеттеры. Object.defineProperty — это функция, которую нельзя изменить в ES5, поэтому Vue не поддерживает браузеры IE8 и более ранних версий.

Эти геттеры/сеттеры невидимы для пользователя, но внутри они позволяют Vue отслеживать зависимости и уведомлять об изменениях при доступе к свойствам и их изменении. Загвоздка здесь в том, что геттеры/сеттеры не форматируются по-разному, когда консоль браузера печатает объект данных, поэтому вам может потребоваться установитьvue-devtoolsчтобы получить более дружественный интерфейс проверки.

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

Вот специальное примечание

На самом деле тем, кто видел апи и исходники, нетрудно узнать,v-model, принцип отклика делится на два слоя

Первый слой, нижний слой, является особенностью es5.Object.definePropertyОбновление данных через геттер, сеттер, Второй уровень — это уровень представления.Каждый, кто видел принцип v-модели, знает, что в нем есть v-модель.watcher,v-onНаблюдатель отслеживает изменения данных, а v-on обновляется в представлении Я полагаю, что многие люди использовали v-on для обновления данных в реальном бою.

Шаг 9. Будет ли добавление и удаление свойств объекта напрямую реагировать на представление? То есть метод обновления массива? и объясни почему?

Отвечать: Добавление и удаление свойств объекта напрямую не будет реагировать на представление, вам нужно использовать метод this.$set() Например

var vm = new Vue({
  data:{
      myjson:{
    name:"张三"     
}
  }
})
vm.myjson.age= "12";    //这样直接对对象属性进行增加是不会直接响应到视图中的。
需要这么写：
this.$set(this.myjson,'age',12);//才会生效

причинаИз-за ограничений современного JavaScript (и устаревания Object.observe) Vue не может обнаружить добавление или удаление свойств объекта. Поскольку Vue выполняет процесс преобразования геттер/сеттер для свойств при инициализации экземпляра, свойство должно существовать в объекте данных, чтобы Vue мог преобразовать его так, чтобы он реагировал.

Шаг десятый, как создать общедоступный глобальный компонент и вызывать его на каждой странице, а также как создавать и вызывать общедоступные методы?

Отвечать:Экспортируйте и смонтируйте созданный компонент или метод js в экземпляр vue. Для получения подробной информации см.Бросок о глобальной ссылке vue на общедоступные js и общедоступные компоненты

шаг одиннадцатый, пожалуйста, объяснитеv-ifа такжеv-showсходства и различия?

То же самое: оба они должны выполнять функцию отображения и скрытия разные:

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

шаг двенадцатый,<keep-alive></keep-alive>Какова роль?

Отвечать:<keep-alive></keep-alive>При обертывании динамических компонентов неактивные экземпляры компонентов кэшируются, в основном для сохранения состояния компонента или предотвращения повторного рендеринга.говорить со своим пониманиемНапример, если есть список и сведения, пользователь часто будет выполнять открытые сведения => возврат списка => открытые сведения... В этом случае и список, и сведения являются страницами с высокой частотой, тогда использование компонент списка можно кэшировать, чтобы вместо повторного рендеринга каждый раз, когда пользователь возвращается к списку, его можно было быстро рендерить из кеша, что снизит нагрузку на сервер и повысит производительность.

шаг тринадцатый,<router-link>свойства и методы?

Отвечать:

• :toЭквивалентно атрибуту "herf" в теге a, за которым следует ссылка для перехода, он будет отображаться как тег --

<router-link :to="/home">Home</router-link>
<!-- 渲染结果 -->
<a href="/home">Home</a>

<router-link :to="/home" replace></router-link>

<router-link :to="/home" tag="li">Home</router-link>
<!-- 渲染结果 -->
<li>Home</li>
此时页面的li同样会起到a链接跳转的结果，vue会自动为其绑定点击事件，并跳转页面

const router = new VueRouter({
  mode: 'hash',
  linkActiveClass: 'u-link--Active', // 这是链接激活时的class
})
<router-link :to="/home" active-class="u-link--Active">Home</router-link>

// 这个链接只会在地址为 / 的时候被激活 
<router-link to="/" exact>Home</router-link>

<router-link to="/user">USER</router-link>

<router-link to="/user/userinfo">USER-info</router-link>

// 如果不设置exact，则当路由到了/user/userinfo 页面时，USER也是被设置了router-link-active样式的！

 router-link默认是触发router.push(location)，如果设置的replace 则触发router.replace(location)，这有啥区别呢?
  router.push() ：导航跑到不同的URL,这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的url.
  router.replace(): 跟router.push作用是一样的，但是，它不会向history添加新记录，而是跟它的方法名一样替换掉当前的history记录.
  router.go(n): 这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似window.history.go(n)

<template>
  <div>
    <div>{{count}}</div>
    <button v-on:click="addCount">改变count的值</button>
  </div>
</template>
<script>
  export default {
    name: "VueOnce",
    data() {
      return {
        count: "我是不可改变的"
      }
    },
    methods: {
      addCount: function () {
        this.count = "我就要改变你";
       此时这个操作dom里边的count是不会变化的
      }
    }
  }
</script>
<style scoped>
</style>

v-cloakДля получения подробной информации, пожалуйста, перейдитеПодробное объяснение v-cloak

Шаг шестнадцатый, вопрос о том, насколько vue совместим с ie.

Отвечать:回答关键字 - babel-polyfill插件Для получения подробной информации, пожалуйста, перейдитеvue-cli решает т.е. проблемы совместимости

Шаг семнадцатый, как vue-cli решает междоменные проблемы?

Ответ: Общая предыстория добавления заголовков запроса и jsonp не будет подробно объяснена.Если вы хотите увидеть подробное руководство, пожалуйста, переместитеРезюме вопросов для фронтенд-интервью. Основное введение здесь — междоменное решение http-proxy-middleware модуля npm. Детали перемещаютсяКак vue-cli решает междоменные проблемы

Шаг восемнадцать, Vue Метод, как вызывать подсомысел в родительской сборке.

Отвечать:回答关键字 - refДля получения подробной информации, пожалуйста, перейдитеКак vue вызывает метод дочернего компонента в родительском компоненте

Шаг девятнадцатый, расскажи о своем правеminxinsПонимание микширования и как его использовать

Для получения подробной информации, пожалуйста, перейдитеПонимание и использование миксинов vue-cli

Шаг 20, расскажите о своем понимании watch (слушателя) и вычисляемого (вычисляемого свойства), а также о разнице между ними.

Для получения подробной информации, пожалуйста, перейдитеvue watch — слушатель и вычисляемый — понимание и использование вычисляемых свойств

шаг двадцать первый, вы знаете, почемуvue 或者 react ,angularЯвляются ли эти mvvm-фреймворки быстрее, чем традиционный рендеринг dom?

• Ответ заключается в том, что vue использует виртуальный дом.
• Студенты, которые не понимают виртуальный дом, пожалуйста, переместитеПонимание и понимание виртуального дома vue