Самое сильное резюме VUE в истории — от него зависит развитие интервью

статьи о фреймворке vue

Преимущества вью

Облегченный фреймворк: сосредоточьтесь только на слое представлений, который представляет собой набор представлений для построения данных размером всего в десятки килобайт;

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

Двусторонняя привязка данных: сохраняет характеристики angular и упрощает работу с данными;

Компонентизация: сохраняет преимущества реакции, реализует инкапсуляцию и повторное использование html и имеет уникальные преимущества при создании одностраничных приложений;

Разделение представления, данных и структуры: упростите изменение данных, не нужно изменять логический код, а нужно только манипулировать данными для выполнения связанных операций;

Виртуальный DOM: операция DOM очень требовательна к производительности.Собственный узел операции DOM больше не используется, что значительно освобождает операцию DOM, но конкретная операция DOM — это просто другой способ;

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

Пожалуйста, уточните, как вы понимаете жизненный цикл vue?

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

До/после создания: на этапе beforeCreate и элемент монтирования el, и данные объекта данных экземпляра vue не определены и не инициализированы. На этапе создания данные объекта данных экземпляра vue доступны, а el не определен и не инициализирован.

До/после загрузки: на этапе beforeMount $el и данные экземпляра vue инициализируются, но до монтирования они все еще являются виртуальными узлами dom, а data.message не был заменен. На этапе монтирования экземпляр vue монтируется, и data.message успешно визуализируется.

До/после обновления: при изменении данных запускаются методы beforeUpdate и updated.

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

Почему данные в компонентах vue должны быть функцией?

Объект является ссылочным типом.При повторном использовании нескольких компонентов, поскольку все объекты данных указывают на один и тот же объект данных, когда данные изменяются в одном компоненте, данные в других повторно используемых компонентах будут изменены одновременно; и используется функция, возвращающая объект, т.к. каждый раз, когда возвращается новый объект (экземпляр Object), а адрес ссылки другой, такой проблемы не возникнет.

В чем разница между v-if и v-show в vue?

v-if и v-show кажутся похожими, когда условие не выполняется, соответствующий элемент метки не виден, но эти две опции разные:

1. v-if создаст и удалит метку соответствующим образом при переключении условия, в то время как v-show загружается только один раз во время инициализации, поэтому накладные расходы v-if будут относительно больше, чем v-show.

2. v-if ленив, метка будет отображаться только тогда, когда условие истинно, если начальное условие неверно, v-if не будет отображать метку. v-show отображает метку независимо от того, истинно ли начальное условие или нет, он просто выполняет простой переключатель CSS.

Разница между вычислением и просмотром

Вычисляемое свойство:

• Поддержка кэширования, только при изменении зависимых данных расчет будет пересчитан
• Асинхронный режим не поддерживается. Он недействителен, если в вычисляемых данных есть асинхронные операции, и не может отслеживать изменения данных.
• вычисляемые значения свойств будут кэшироваться по умолчанию, а вычисляемые свойства кэшируются на основе их отзывчивых зависимостей, то есть вычисляемых значений на основе данных, объявленных в данных или в свойствах, переданных родительским компонентом.
• Если атрибут вычисляется из других атрибутов, и этот атрибут зависит от других атрибутов, то это атрибут «многие к одному» или «один к одному», обычно с использованием вычисляемых свойств.
• Если значение свойства вычисляемого свойства является функцией, метод get будет использоваться по умолчанию; возвращаемое значение функции является значением свойства свойства; в вычислении свойство имеет методы get и set. данные изменяются, вызывается метод set.

Прослушивание имущества смотреть:

• Не поддерживает кэширование, изменения данных будут напрямую запускать соответствующие операции;
• часы поддерживают асинхронность;
• Функция прослушивания получает два параметра, первый параметр является последним значением, второй параметр является значением до ввода;
• При изменении атрибута необходимо выполнить соответствующую операцию: один ко многим;
• Данные прослушивания должны быть данными, объявленными в данных, или данными в свойствах, переданных родительским компонентом.При изменении данных запускаются другие операции.Функция имеет два параметра:

немедленно: загрузка компонента немедленно вызывает выполнение функции обратного вызова

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即执行handler方法
    immediate: true
  }
}

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

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}

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

watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    // deep: true
  }
}

Таким образом, Vue.js будет анализировать слой за слоем, пока не встретит атрибут a, а затем установит функцию прослушивания для a.

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

Загрузчик для файлов vue, который конвертирует template/js/style в модули js.

Что такое $nextTick?

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

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

Роль V-для ключа

Когда Vue обновляет отображаемый список элементов с помощью v-for, по умолчанию используется стратегия «повторное использование на месте». Если порядок элементов данных изменен, вместо того, чтобы перемещать элементы DOM в соответствии с изменением элемента данных, Vue просто повторно использует каждый элемент и следит за тем, чтобы каждый элемент отображался с определенным индексом.

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

Специальное свойство ключа в основном используется в алгоритме виртуального DOM Vue для идентификации VNodes при сравнении старых и новых узлов. Без ключей Vue использует алгоритм, который сводит к минимуму динамические элементы и пытается максимально исправить/повторно использовать элементы одного и того же типа. С ключом он изменит порядок элементов на основе изменения ключа и удалит элементы, ключ которых не существует.

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

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

1. С помощью сеттеров и геттеров добавляется рекурсивный обход объектов данных, которые необходимо наблюдать, включая свойства объектов подсвойств. быть под наблюдением.

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

3. Подписчик Watcher является связующим звеном между Observer и Compile.Основные моменты: ① Добавьте себя к подписчику свойства (dep), когда вы создаете свой экземпляр ②У него должен быть сам метод update() ③ Когда свойство изменяет уведомление dep.notice(), оно может вызвать свой собственный метод update() и инициировать обратный вызов, привязанный к компиляции, тогда это будет успешным.

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

значение передачи компонента

отец сыну

Пройти через реквизит

父组件： <child value = '传递的数据' />

子组件: props['value'],接收数据,接受之后使用和data中定义数据使用方式一样

сын к отцу

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

父组件： <child @receive = 'receive' />

 子组件: this.$emit('receive','传递的数据')

Значение передачи компонента Brother

• через центральную связь let bus = new Vue()

A: методы: { function {bus.$emit('название пользовательского события', данные)} отправить

B: создано () {bus.$on('имя пользовательского события, отправленное из A', функция)} для приема данных

• от vuex

проверка свойств и значения по умолчанию

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

props: {
    visible: {
        default: true,
        type: Boolean,
        required: true
    },
},

Подскажите, пожалуйста, процесс инкапсуляции компонентов vue

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

Затем используйте метод Vue.extend для создания компонента, а затем используйте метод Vue.component для регистрации компонента. Дочерним компонентам нужны данные, и они могут принимать определения в свойствах. После того, как дочерний компонент изменяет данные, он хочет передать данные родительскому компоненту. Можно использовать метод emit.

Компиляция шаблона Vue.js

Короче говоря, сначала он преобразуется в дерево AST, а затем результирующая функция рендеринга возвращает VNode (виртуальный DOM-узел Vue).Подробные шаги следующие:

Сначала шаблон компилируется в синтаксическое дерево AST (абстрактное синтаксическое дерево — это древовидное представление абстрактной синтаксической структуры исходного кода) с помощью компилятора компиляции. compile — это возвращаемое значение createCompiler, которое используется для создания компилятора. Кроме того, компиляция также отвечает за слияние опций.

Затем AST выполнит генерацию (процесс преобразования синтаксического дерева AST в строку функции рендеринга), чтобы получить функцию рендеринга. имя тега, дочерний узел, текст и т. д. Подождите)

что такое ссс? Каковы шаги установки и использования в vue.cli? Каковы характеристики?

Предварительная компиляция css выглядит следующим образом:

Первый шаг: используйте npm для загрузки трех загрузчиков (sass-loader, css-loader, node-sass)

Шаг 2. Найдите webpack.base.config.js в каталоге сборки и добавьте расширение .scss к свойству extends.

Шаг 3. В том же файле настройте атрибут модуля.

Шаг 4: Затем добавьте атрибут lang в тег стиля компонента, например: lang="scss"

Основные особенности:

• Можно использовать переменные, например ($имя переменной=значение)
• Вы можете использовать микшер, например ()
• могут быть вложены

Как vue прослушивает изменения в объекте или свойстве массива

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

Решение:

• this.$set (массив/объект, который вы хотите изменить, позицию/ключ, который вы хотите изменить, какое значение вы хотите изменить)

this.$set(this.arr, 0, "OBKoro1"); // 改变数组
this.$set(this.obj, "c", "OBKoro1"); // 改变对象

• Вызвать методы следующих массивов

splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

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

Часто используемые модификаторы событий

• .stop: перестать пузыриться
• .prevent: предотвратить поведение по умолчанию
• .self: срабатывает только на самом элементе привязки
• .once: добавлено в версии 2.1.4, срабатывает только один раз.
• пассивный: добавлено в 2.3.0, поведение событий прокрутки по умолчанию (т.е. поведение прокрутки) будет запущено немедленно, не может использоваться с .prevent
• модификатор .sync

Vue повторно ввел модификатор .sync с версии 2.3.0, но на этот раз он существует только как синтаксический сахар времени компиляции. Он будет расширен до прослушивателя v-on, который автоматически обновляет свойства родительского компонента. Пример кода выглядит следующим образом:

<comp :foo.sync="bar"></comp>

будет расширен до:

<comp :foo="bar" @update:foo="val => bar = val"></comp>

Когда дочернему компоненту необходимо обновить значение foo, ему необходимо явно запустить событие обновления:

this.$emit('update:foo', newValue)

Как vue получает дом

Сначала установите значение ref для тега, а затем получите его через this.$refs.domName, например:

<div ref="test"></div>

const dom = this.$refs.test

Может ли v-on прослушивать несколько методов?

Да, вот пример:

<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }">

Разница между активами и статическими

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

Разница между ними:

Файлы в активах будут упакованы при запуске сборки npm run. После упаковки он также будет помещен в статику.

Файлы в статике не будут упакованы.

Предложение: поместите необработанные файлы, такие как изображения, в активы и упакуйте их, чтобы уменьшить размер. Для некоторых файлов ресурсов, представленных третьими лицами, таких как iconfont.css, можно разместить статические, поскольку эти файлы были обработаны.

слот слот

Много раз после того, как мы инкапсулируем дочерний компонент, мы хотим добавить некоторые элементы DOM, когда используется родительский компонент.В это время мы можем использовать слот-слот, но отображаются ли эти DOM и где они отображаются, зависит от дочернего компонента. Компонент Положение компонента слота.

Проблема с миганием страницы инициализации vue

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

Во-первых: добавьте следующий код в css

[v-cloak] {
    display: none;
}

Если это не решит проблему полностью, добавьте в корневой элемент style="display: none;" :style="{display: 'block'}"

статьи о плагинах vue

Управление состоянием (vuex)

что такое векс

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

Как использовать векс

Первый шаг к установке

npm install vuex -S

Второй шаг — создание магазина.

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//不是在生产环境debug为true
const debug = process.env.NODE_ENV !== 'production';
//创建Vuex实例对象
const store = new Vuex.Store({
    strict:debug,//在不是生产环境下都开启严格模式
    state:{
    },
    getters:{
    },
    mutations:{
    },
    actions:{
    }
})
export default store;

Третий шаг — внедрить vuex

import Vue from 'vue';
import App from './App.vue';
import store from './store';
const vm = new Vue({
    store:store,
    render: h => h(App)
}).$mount('#app')

В vuex есть несколько основных свойств, какие они?

Всего существует 5 основных атрибутов, а именно:

• state — единственный источник данных, данные в экземпляре Vue подчиняются тем же правилам.
• Геттеры можно рассматривать как вычисляемые свойства хранилища.Как и вычисляемые свойства, возвращаемое значение геттера будет кэшироваться в соответствии с его зависимостями и будет повторно вычисляться только при изменении его зависимостей. Геттеры выставляются как объекты store.getters, и вы можете получить доступ к этим значениям как к свойствам.

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

• Единственный способ для мутации изменить состояние в хранилище Vuex — это зафиксировать мутацию, очень похожую на событие, инициированное методом store.commit.

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

store.commit('increment')

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

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

• модуль Из-за использования единого дерева состояний все состояния приложения будут сосредоточены в относительно большом объекте. Когда приложение становится очень сложным, объект хранилища может сильно раздуться. Чтобы решить вышеуказанные проблемы, Vuex позволяет нам разделить хранилище на модули.

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

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

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

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

Можно ли напрямую изменить данные, полученные от vuex?

Данные, взятые из vuex, нельзя изменить напрямую, их нужно изменить после неглубокого копирования объекта, иначе будет сообщено об ошибке;

Данные в vuex исчезают после обновления страницы

Храните данные с sessiontorage или localstorage

存储： sessionStorage.setItem( '名', JSON.stringify(值) )
使用： sessionStorage.getItem('名') ---得到的值为字符串类型，用JSON.parse()去引号；

Вы также можете ввести плагин vuex-persist, который используется следующим образом:

• Установить

npm install --save vuex-persist
or
yarn add vuex-persist

• представлять

import VuexPersistence from 'vuex-persist'

• Сначала создайте объект и настройте его

const vuexLocal = new VuexPersistence({
    storage: window.localStorage
})

• Введен в плагин vuex

const store = new Vuex.Store({
  state: { ... },
  mutations: { ... },
  actions: { ... },
  plugins: [vuexLocal.plugin]
}) 

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

Что такое строгий режим Vuex, что он делает и как его включить?

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

Включите его в опции конструктора Vuex.Store, как показано ниже.

const store = new Vuex.Store({
    strict:true,
})

Как пакетно использовать свойства геттера Vuex в компонентах

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

import {mapGetters} from 'vuex'
export default{
    computed:{
        ...mapGetters(['total','discountTotal'])
    }
}

Повторное использование мутаций в компонентах

Используйте вспомогательную функцию mapMutations, подобную этой, в компоненте

import { mapMutations } from 'vuex'
methods:{
    ...mapMutations({
        setNumber:'SET_NUMBER',
    })
}

Тогда вызов this.setNumber(10) эквивалентен вызову this.$store.commit('SET_NUMBER',10)

В чем разница между мутациейи действием

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

action 是用this.store.dispatch('ACTION_NAME',data)来提交。
mutation是用this.$store.commit('SET_NUMBER',10)来提交

• Параметры приема разные, первый параметр мутации — состояние, а первый параметр действия — контекст, который содержит

{
    state,      // 等同于 `store.state`，若在模块中则为局部状态
    rootState,  // 等同于 `store.state`，只存在于模块中
    commit,     // 等同于 `store.commit`
    dispatch,   // 等同于 `store.dispatch`
    getters,    // 等同于 `store.getters`
    rootGetters // 等同于 `store.getters`，只存在于模块中
}

Как использовать значение в состоянии Vuex на v-модели?

Его необходимо преобразовать с помощью вычисляемых свойств.

<input v-model="message">
// ...
computed: {
    message: {
        get () {
            return this.$store.state.message
        },
        set (value) {
            this.$store.commit('updateMessage', value)
        }
    }
}

Управление страницей маршрутизации (vue-router)

Что такое vue-маршрутизатор

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

• Вложенная таблица маршрутов/представлений
• Модульная конфигурация маршрутизации на основе компонентов
• Параметры маршрутизации, запросы, подстановочные знаки
• Просмотр эффекта перехода на основе системы перехода Vue.js
• Детальное управление навигацией
• Ссылки с автоматически активированными классами CSS
• Режим истории HTML5 или режим хеширования, автоматически ухудшаемый в IE9
• Пользовательское поведение полосы прокрутки

Как использовать vue-маршрутизатор

Первый шаг к установке

npm install vue-router -S

Второй шаг — использовать компонент Vue Router в main.js.

Третий шаг — настройка маршрутизации

• определить (маршрутный) компонент

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

• определить маршруты (массив объектов маршрута)

Определяет массив объектов маршрута. Путь объекта является настраиваемым путем (то есть соответствующий компонент можно найти по этому пути), а компонент ссылается на компонент, соответствующий маршруту. следующим образом:

• Создайте экземпляр объекта Vue Router

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

• Смонтируйте корневой экземпляр

Четвертый шаг — использовать маршрутизацию в App.vue.

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

Как определить динамическую маршрутизацию vue-router? Как получить переданные динамические параметры?

В файле index.js в каталоге маршрутизатора добавьте /:id к атрибуту пути.使用router对象的params.id获取动态参数

Навигационный хук для vue-router

Обычно используется router.beforeEach(to, from, next), который оценивает разрешения перед переходом. Есть три вида:

• Глобальный навигационный хук: router.beforeEach(to, from, next)
• Крючки внутри компонентов
• Индивидуальная маршрутизация эксклюзивных компонентов

vue параметры маршрутизации

Параметры, переданные с помощью метода запроса, принимаются с помощью this.$route.query

Параметры, переданные с помощью метода params, принимаются с помощью this.$route.params

Разница между маршрутизатором и маршрутом

route — это текущий объект перехода маршрутизатора, вы можете получить имя, путь, запрос, параметры и т. д.

Маршрутизатор является экземпляром VueRouter. Если вы хотите перейти к другому URL-адресу, используйте метод router.push.

Ошибка типа маршрутизации: не удается прочитать свойство «соответствует» неопределенной проблеме с ошибкой

Найдите новый Vue() в файле ввода main.js, вы должны использовать имя маршрутизатора, вы не можете изменить маршрутизатор на Router или другие псевдонимы.

// 引入路由
import router from './routers/router.js'

new Vue({
    el: '#app',
    router,    // 这个名字必须使用router
    render: h => h(App)
});

Маршруты загружаются по запросу

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

webpack< 2.4 时
{ 
    path:'/', 
    name:'home',
    components:resolve=>require(['@/components/home'],resolve)
} 
webpack> 2.4 时
{ 
    path:'/', 
    name:'home', 
    components:()=>import('@/components/home')
}

Метод import() предложен es6.Динамическая загрузка возвращает объект Promise.Параметром метода then является загруженный модуль. Как и в случае с методом require в Node.js, основной метод import() загружается асинхронно.

Роутер-линк в Vue на компе помогает, а на андроиде не отвечает, как решить

У маршрутизации Vue есть проблемы на машинах Android, проблемы с Babel, установите плагин babel polypill для решения

Недопустимое решение для событий, зарегистрированных на маршрутизаторе-ссылке в Vue2.

Используйте @click.native. Причина: router-link предотвратит события кликов, .native относится к прямому прослушиванию собственного события.

Проблемы с RouterLink, не работающим в IE и Firefox (маршрутизация не скачет)

• Используйте только тег, не используйте тег кнопки
• Использование тега кнопки и метода Router.navigate

сетевой запрос (аксиос)

Пожалуйста, смотрите мою другую статью для этого модуля, которая не будет организована здесь (мне лень)

Изучите пакет axios, весь мир принадлежит вам

Воспроизведение видео (video.js)

Пожалуйста, смотрите мою другую статью для этого модуля, которая не будет организована здесь (мне лень)

Практика с нуля --- инкапсулировать компонент vue video player

Vue часто используемая библиотека пользовательского интерфейса

мобильный

• мятный интерфейс (http://mint-ui.github.io/#!/zh-cn)
• Вант (https://youzan.github.io/vant/#/zh-CN/home)
• VUX (https://vux.li/)

ПК сторона

• элемент-интерфейс (https://element.eleme.cn/2.13/#/zh-CN/component/installation)
• Муравей Дизайн Vue (https://www.antdv.com/docs/vue/introduce-cn/)
• Avue (https://avuejs.com/)

Общая конфигурация веб-пакета

леса vue-lic3 (vue.config.js)

publicPath

Тип: Строка

По умолчанию:'/'

Базовый URL-адрес при развертывании пакета приложения. По умолчанию Vue CLI предполагает, что ваше приложение развернуто в корне доменного имени, например https://www.my-app.com/. Если приложение развернуто на дополнительном пути, вам необходимо указать дополнительный путь с помощью этой опции. Например, если ваше приложение развернуто по адресу https://www.my-app.com/my-app/, задайте для publicPath значение /my-app/.

Этому значению также можно присвоить пустую строку ('') или относительный путь ('./'), чтобы все ресурсы были связаны относительными путями, чтобы типизированный пакет можно было развернуть по любому пути или использовать в файловые системы, такие как гибридные приложения Cordova.

productionSourceMap

тип: логический

По умолчанию: правда

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

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

assetsDir

Каталог (относительно outputDir), в котором размещаются сгенерированные статические ресурсы (js, css, img, шрифты), по умолчанию '',

indexPath

Указывает выходной путь (относительно outputDir) сгенерированного index.html. Также может быть абсолютным путем. По умолчанию используется index.html.

lintOnSave

Использовать ли eslint для проверки при каждом сохранении, у него более строгие требования к грамматике, и учащиеся, у которых есть требования к себе, могут его использовать

css

css: {
    //是否启用css分离插件，默认是true，如果不启用css样式分离插件，打包出来的css是通过内联样式的方式注入至dom中的，
    extract: true,
    sourceMap: false,//效果同上
    modules: false,// 为所有的 CSS 及其预处理文件开启 CSS Modules。
    // 这个选项不会影响 `*.vue` 文件。
  },

devServer

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

devServer: { 
    //配置开发服务器
    host: "0.0.0.0",
    //是否启用热加载，就是每次更新代码，是否需要重新刷新浏览器才能看到新代码效果
    hot: true,
    //服务启动端口
    port: "8080",
    //是否自动打开浏览器默认为false
    open: false,
    //配置http代理
    proxy: { 
      "/api": { //如果ajax请求的地址是http://192.168.0.118:9999/api1那么你就可以在jajx中使用/api/api1路径,其请求路径会解析
        // http://192.168.0.118:9999/api1，当然你在浏览器上开到的还是http://localhost:8080/api/api1;
        target: "http://192.168.0.118:9999",
        //是否允许跨域，这里是在开发环境会起作用，但在生产环境下，还是由后台去处理，所以不必太在意
        changeOrigin: true,
        pathRewrite: {
            //把多余的路径置为''
          "api": ""
        }
      },
      "/api2": {//可以配置多个代理，匹配上那个就使用哪种解析方式
        target: "http://api2",
        // ...
      }
    }
},

pluginOptions

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

{
    //定义一个全局的less文件，把公共样式变量放入其中，这样每次使用的时候就不用重新引用了
    'style-resources-loader': {
      preProcessor: 'less',
      patterns: [
        './src/assets/public.less'
      ]
    }
}

chainWebpack

— это функция, которая получит экземпляр ChainableConfig на основе цепочки веб-пакетов. Позволяет вносить более мелкие изменения во внутреннюю конфигурацию веб-пакета. Например:

chainWebpack(config) { 
//添加一个路径别名 假设有在assets/img/menu/目录下有十张图片，如果全路径require("/assets/img/menu/img1.png")
//去引入在不同的层级下实在是太不方便了，这时候向下方一样定义一个路劲别名就很实用了
    config.resolve.alias
      //添加多个别名支持链式调用
      .set("assets", path.join(__dirname, "/src/assets"))
      .set("img", path.join(__dirname, "/src/assets/img/menu"))
      //引入图片时只需require("img/img1.png");即可
}

Ссылаться на:

1. Обзор распространенных проблем с Vue https://blog.csdn.net/qq_27674439/article/details/99449197

2. Общие вопросы интервью Vue https://zhuanlan.zhihu.com/p/92407628

3. Официальный сайт Vuex https://vuex.vuejs.org/zh/

4. Резюме вопросов интервью Vuex https://juejin.cn/post/6844903993374670855

5. Официальный сайт Vue CLI https://cli.vuejs.org/zh/

Рекомендуемые исторические статьи:

1,[Статья длиной 10 000 символов] Краткое изложение самых сильных css и html в истории ~ Прочитав о повышении зарплаты, это больше не мечта

2,[Статья длиной 10 000 символов] Наиболее полное изложение основ JavaScript ~ Рекомендуемая коллекция

3.Цикл событий Я знаю, что такое макрозадача и микрозадача?

4.Оружие Sharp Coder vscode

5.Сборник интервью перенесет вас на вершину жизни

Наконец, если вам нравится Xiaobian, вы можете обратить внимание на публичный аккаунт Xiaobian [Little Monkey Web Growth Road], чтобы узнать больше о галантерейных товарах. Обратив внимание, вы можете ответить на систему знаний в фоновом режиме, а также вы можете получить переднюю систему знаний, тщательно подготовленную редактором, и вы больше не будете смущены в будущем обучении.

В этой статье используетсяmdniceнабор текста