Резюме темы интервью: Резюме знаний Vue

Введение

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

Будьте ленивы: вы можете обратиться к моей собственной сводной карте разума:кликните сюда

Приложение: Накопление документов по высокочастотным вопросам интервью. От (платформы Senior, Niuke и т. д.)

Адрес самостоятельно разработанного блога:zxinc520.com

адрес гитхаба:нажмите

Эта статья js - [резюме знаний vue] Знания: я все понимаю, интервью очень легкое.

Справочный адрес моего блога [MVVM и vue]:адрес

Справочный адрес моего блога [Virtual DOM]:адрес

1. Виртуальный дом

1. Что такое виртуальный дом

виртуальный дом, виртуальный дом
Моделирование структуры DOM с помощью JS
Сравнение изменений DOM выполняется на уровне JS (полный язык Тьюринга).
Плюсы: Улучшает производительность перерисовки

2. Смысл существования виртуального дома

Манипуляции с DOM «дорого»
Поместите операцию сравнения DOM на уровень JS, чтобы повысить эффективность.
Чем сложнее проект, тем больше эффект

3. Как применять vdom и что такое основной API?

Представляем снаббдом
- snabbdom : библиотека реализации vdom.
Основной API
- h функция
- Функция h — это функция, которая генерирует виртуальный DOM.
- h('', {...свойства...}, [...дочерние элементы...])
- h('', {...свойства...}, ['....'])
- Функция патча
  - Используйте алгоритм сравнения, чтобы сравнить разницу между старым VNode и новым VNode, а затем выполните операцию исправления или функцию исправления, чтобы эффективно обновить узел Dom.
  - патч(контейнер, vnode)
  - патч(vnode, новыйVnode)

4. Представьте алгоритм сравнения

Введение
- Алгоритм сравнения всегда вокруг нас, а не концепция, созданная Vue и React.
Почему vdom использует алгоритм diff
- Манипулирование DOM «дорого», поэтому постарайтесь свести к минимуму манипуляции с DOM.
- Узнайте узлы, которые должны быть обновлены в DOM на этот раз для обновления, остальные не обновляются
- Этот процесс «поиска» требует алгоритма сравнения

процесс реализации diff

патч (контейнер, vnode)

Базовая логика createElment

function createElement(vnode) {
    let tag = vnode.tag
    let attrs = vnode.attr || {}
    let children = vnode.children || []
    let elem = document.createElement(tag)
    for (let attrName in attrs) {
        if (attr.hasOwnProperty(attrName)) {
            elem.setAttribute(attrName, attrs[attrName])
        }
    }
    children.forEach((childVnode) => {
        elem.append(createElement(childVnode))
    })
    return elem
}

патч (vnode, newVnode)

обновление базовой логики для детей

function updateChildren(vnode, newVnode) {
    let children = vnode.children || []
    let newChildren = newVnode.children || []
    children.forEach((child, index) => {
        let newChild = newChildren[index]
        if (newChild == null) {
            return
        }
        if (child.tag === newChild.tag) {
            updateChildren(child, newChild)
        } else {
            replaceNode(child, newChild)
        }
    })
}

Ввести алгоритм сравнения?
- Знайте, что такое алгоритм сравнения, который является основной командой Linux.
- Цель применения алгоритма diff в vdom — найти узлы, которые необходимо обновить
- реализация diff: patch (контейнер, vnode) и patch (vnode, newVnode)
- Основная логика, createElment и updataChildren

Два, Vue Revical Summary

5. Разница между фреймворком и библиотекой

библиотека (библиотека)
- Небольшая и компактная библиотека, предоставляющая только определенные API; преимущество в том, что лодка маленькая и ее легко развернуть. Легко переключаться с одной библиотеки на другую, но код почти не меняется.
Фреймворк
- Фреймворк большой и всеобъемлющий, фреймворк предоставляет полный набор решений, поэтому, если в середине проекта, сложнее переключиться на другой фреймворк.
Скажите разницу между использованием jQuery и используйте рамки
1. Разделение данных и представлений (принципы открытого закрытия)
2. VUE управляет представлением с помощью данных, заботится только об изменениях данных, а операции DOM инкапсулируются.

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

вью и угловой
- Стоимость обучения AngularJS высока, например, добавление функции внедрения зависимостей, в то время как API, предоставляемый самим Vue.js, относительно прост и интуитивно понятен; с точки зрения производительности AngularJS полагается на грязную проверку данных, поэтому чем больше наблюдателей, тем медленнее; Vue.js использует Основываясь на наблюдениях отслеживания зависимостей и использовании асинхронных обновлений очереди, все данные запускаются независимо.
Вью и Реакт
- Виртуальный DOM, используемый React, выполнит грязную проверку визуализированных результатов, Vue.js предоставляет в шаблоне инструкции, фильтры и т. д., что позволяет очень удобно и быстро управлять виртуальным DOM.

7. Обзор Vue

что такое вью
- это прогрессивный js-фреймворк для создания пользовательских интерфейсов.
where
- От простой обработки форм до сложных одностраничных приложений с частыми манипуляциями с данными
Зачем использовать ВУЭ
- управляемый данными
- составной
Способ работы
- Шаблоны могут быть расширены с помощью богатых директив, а функциональность может быть улучшена с помощью широкого спектра плагинов.

8. Шаблон фреймворка MVVM

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

9. Взгляните на три элемента *

9.1 Отзывчивость: как Vue отслеживает каждое изменение атрибута данных?

Что касается отзывчивости, какие задачи разделяют наблюдения, деп и вода?

[наблюдаемый класс] [объект управления] [исполнитель воды] ---Вычислять

Что такое Vue Reactive
- Атрибут данных проксируется на виртуальную машину
Object.defineProperty (двусторонняя привязка данных)
- определение
  - Метод Object.defineProperty() определяет новое свойство непосредственно в объекте или изменяет существующее свойство объекта и возвращает объект.
- Недостатки [Почему при обновлении Vue3.x используется прокси вместо Object.defineProperty]
  - Object.defineProperty не может отслеживать изменение нижнего индекса массива, что приводит к добавлению элементов через нижний индекс массива, который не может реагировать в режиме реального времени;
  - Object.defineProperty может только захватить свойства объекта, поэтому ему необходимо пройти каждый объект и каждое свойство.Если значение свойства является объектом, его также необходимо глубоко пройти. Прокси может захватить весь объект и вернуть новый объект.
  - Прокси может проксировать не только объекты, но и массивы. Вы также можете проксировать динамически добавляемые свойства.
процесс изменения атрибута данных
1. Измените свойство, которое отслеживается адаптивным набором.
2. Выполнить updataComponent в наборе (асинхронно)
3. updataComponent повторно выполняет vm.render()
4. Сгенерированный vnode и prevVnode, сравнить по патчу
5. визуализировать в html

Как имитировать, как Vue прослушивает данные

let vm={}
let data={
    name:'zc',
    age:'12'
}
for(let key in data){
    if(data.hasOwnProperty(key)){
        Object.defineProperty(vm,key,{
            get:function () {
                return data[key]
            },
            set:function (newValue) {
                data[key] = newValue
            }
        })
    }
}

9.2 Механизм шаблонов: как анализируются шаблоны vue и обрабатываются инструкции?

Что такое шаблон?
- Сущность: Строка
- иметь логику, такую как v-if, v-for и т. д.
- Похож на формат html, но сильно отличается
- Наконец, он будет преобразован в html для отображения
Шаблон в конечном итоге должен быть переведен в код JS, потому что
- Есть логика (v-if, v-for), которую надо реализовать на JS (по Тьюрингу завершено)
- Преобразование в html для отображения страницы, вы должны использовать JS для достижения
- Поэтому шаблон самое главное конвертируется в JS функцию (функция рендеринга)
Как парсить шаблоны в vue
- Обзор
  - Шаблон необходимо преобразовать в функцию рендеринга (первый шаг компиляции — разобрать шаблон в AST (абстрактное синтаксическое дерево) через функцию разбора, второй шаг — оптимизировать AST (обнаружить чистое статическое поддерево DOM, который не нужно изменять), третий шаг Генерирует объект, содержащий строки функций рендеринга из оптимизированного абстрактного синтаксического дерева.)
  - специфический
    1. Первый шаг — преобразовать шаблон в AST (абстрактное синтаксическое дерево) с помощью функции разбора.
      - Анализ в AST: функция разбора [исходный код]
      - В процессе синтаксического анализа шаблона постоянно запускаются различные функции ловушек, и информация об узле передается в ast builder Vue.js через методы start, end и chars, а также комментарии, а ast шаблона строится во время разбор.
    2. Второй шаг оптимизирует AST (обнаруживает чисто статические поддеревья DOM, которые не нужно изменять).
      - Оптимизировать AST: функция оптимизации [исходный код]
    3. На третьем этапе создается объект, содержащий строку функции рендеринга в соответствии с оптимизированным абстрактным синтаксическим деревом.
      - Сгенерировать функцию рендеринга: сгенерировать функцию [исходный код]

9.3 Рендеринг: как шаблон vue визуализируется в html? и процесс рендеринга

функция рендеринга и vdom
- Патч, генерирующий vdom, реализован в updataComponent
- Первый рендеринг страницы выполняет updataComponent
- функция рендеринга - использование with
  - Суммировать
    - Вся информация в шаблоне содержится в функции рендеринга
    - это вм
    - цена this.price vm.price цена в данных
    - _c это _c это вм _c
  - использовать
```
// 使用 with
function fn1() {
    with (obj) {
        console.log(name)
        console.log(age)
        getAddress()
    }
}
```
- Каждый раз, когда атрибут изменяется в данных, выполняйте updataComponent

10. Весь процесс внедрения Vue?

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

11. Жизненный цикл Vue

Что такое жизненный цикл
- Процесс экземпляра Vue от создания до уничтожения — это жизненный цикл. То есть ряд процессов от начала создания, инициализации данных, компиляции шаблонов, монтирования Dom → рендеринга, обновления → рендеринга, выгрузки и т. д., мы называем это жизненным циклом Vue.
эффект
- Он имеет несколько обработчиков событий в своем жизненном цикле, что упрощает формирование хорошей логики при управлении процессом всего экземпляра Vue.
Сколько этапов в жизненном цикле vue?
- Всего его можно разделить на 8 этапов: до/после создания, до/после загрузки, до/после обновления, до/после уничтожения.
Какие хуки срабатывают при загрузке первой страницы?
- Хуки beforeCreate, created, beforeMount, mount срабатывают, когда страница загружается в первый раз.
Кратко опишите, для каких сценариев подходит каждый цикл?
- beforecreate: здесь вы можете добавить событие загрузки, которое будет запускаться при загрузке экземпляра.
- created: Здесь пишется событие завершения инициализации.Если здесь заканчивается событие загрузки, асинхронный запрос тоже подходит для вызова сюда.
- Mounted: смонтировать элемент и получить узел DOM
- обновлено: Если данные обрабатываются равномерно, напишите здесь соответствующую функцию
- beforeDestroy: вы можете сделать окно подтверждения, чтобы подтвердить событие остановки nextTick: управлять домом сразу после обновления данных
функция ловушки
1. beforeCreate : экземпляр компонента только что создан, а данные в данных и методах не были инициализированы.
2. created: Экземпляр компонента создан, данные и методы инициализированы! но DOM еще не сгенерирован
3. beforeMount: перед компиляцией/монтированием шаблона
4. смонтирован: после того, как шаблон скомпилирован/смонтирован
5. beforeUpdate: Перед обновлением компонента
6. обновлено: после обновления компонента
7. beforeDestroy: вызывается перед уничтожением компонента
8. уничтожено: вызывается после уничтожения компонента

12. Связь между компонентами Vue (отец, брат, внук и т. д.)

шесть способов

props/$emit
- Родительский компонент A передается дочернему компоненту B через реквизиты, а B для A реализуется с помощью $emit в компоненте B и v-on в компоненте A.
- Область применения: в родительских и дочерних компонентах
on
- Этот метод использует пустой экземпляр Vue в качестве центральной шины событий (центра событий), которая используется для запуска событий и отслеживания событий, разумно и легко реализуя связь между любыми компонентами, включая родительский-дочерний, одноуровневый и межуровневый. Когда наш проект относительно большой, мы можем выбрать vuex, лучшее решение для управления состоянием.
- конкретная реализация
```
 var Event=new Vue();
    Event.$emit(事件名,数据);
    Event.$on(事件名,data => {});
```
- Сфера применения: в том числе отец и сын, брат, кросс-уровень
vuex
- Vuex — это шаблон управления состоянием, разработанный для приложений Vue.js. Он использует централизованное хранилище для управления состоянием всех компонентов приложения и использует соответствующие правила для обеспечения предсказуемого изменения состояния.
listeners
- Когда для многоуровневой вложенности компонентов необходимо передать данные, обычно используется метод через vuex. Но если вы просто передаете данные без промежуточной обработки, использование обработки vuex немного излишне. Для этой версии Vue2.4 предусмотрен другой метод ----listeners
provide/inject
- Чтобы позволить компоненту-предку внедрять зависимость во всех своих потомков, независимо от того, насколько глубока иерархия компонентов, и это всегда будет вступать в силу, когда устанавливаются отношения восходящего и нисходящего потоков.
дети и реф.
- Недостаток: Недостаток обоих методов заключается в том, что нет возможности общаться между уровнями или братьями и сестрами.

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

общение отца и сына
- Данные передаются родительским под-пропсом, дочерним - родительским Events (parent / attrs/$listeners
Связь с братом
- Автобус; Векс
межуровневая коммуникация
- Bus; Vuex; предоставить/внедрить API,listeners

13. Векс

определение
- Vuex — это шаблон управления состоянием, разработанный для приложений Vue.js. Он использует централизованное хранилище для управления состоянием всех компонентов приложения и использует соответствующие правила для обеспечения предсказуемого изменения состояния.
Основная идея Vuex
- Извлеките общее состояние компонентов и управляйте ими в глобальном одноэлементном режиме. В этом режиме наше дерево компонентов образует огромное «представление». Независимо от того, где в дереве любой компонент может получить состояние или запустить поведение!
Vuex отличается от чистого глобального объекта двумя способами:
1. Хранилище состояния Vuex является реактивным.
2. Вы не можете напрямую изменить состояние в хранилище. Единственный способ изменить состояние в хранилище — это явно зафиксировать мутацию. Это потому, что мы хотим отслеживать изменения состояния более явно.
Состав векса
1. state
  - Vuex для использования состояния приложений хранения необходимо поделиться состоянием. Для того чтобы позволить Vue assuse после изменения состояния наряду с изменениями, нам нужно создать состояние на основе расчетной собственности.
2. getters
  - Его можно рассматривать как вычисляемое свойство хранилища, возвращаемое значение геттера будет кэшироваться в соответствии с его зависимостями и будет пересчитываться только при изменении значения его зависимости.
3. мутации (синхронизация)
  - Является исполнителем изменения состояния, мутации используются для синхронного изменения состояния
```
store.commit({
  type: 'increment',
  amount: 10   //这是额外的参数
})
```
4. действия (асинхронные)
  - Изменение состояния асинхронно, действие не изменяет состояние напрямую, а инициирует мутацию
```
// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})
```
```
// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})
```
5. Модуль: Модульный магазин
  - проблемы
    - Благодаря использованию единого дерева состояний все состояния приложения будут агрегированы в относительно большой объект. Когда приложение становится очень сложным, объект хранилища может сильно раздуться.
  - решение
    - Vuex позволяет нам разделить хранилище на модули. Каждый модуль имеет свое состояние, мутации, действия, геттеры и даже вложенные подмодули.

Рабочий процесс vuex

Данные передаются из состояния на страницу
Инициировать действие на странице через диспетчеризацию
Действие запускает мутацию, вызывая коммит
Мутация для изменения данных, затем запускает NOTIFY объекта DEP, информирует все объекты Watcher об изменении соответствующего представления (принцип двусторонней привязки данных Vue)

Сценарии применения

Несколько представлений зависят от одного и того же состояния
Действия из разных представлений должны изменять одно и то же состояние

14. Маршрутизация Vue (vue-router)

Принцип реализации маршрутизации Vue [должен быть предельно ясен]

vue-router
- что такое vue-маршрутизатор
  - Vue Router — официальный менеджер маршрутизации для Vue.js.
- какие компоненты
  1. <router-link >
  2. <router-view>
  3. <keep-alive >
    - определение
      - keepalive — это компонент, встроенный в Vue, который может сохранять состояние содержащихся компонентов или избегать повторного рендеринга. Также известен как ----- кеш компонентов
    - кеш компонентов
      - Использовать включить/исключить
        
        include
        
        exclude
      - Добавьте свойство Router.Meta
        
        meta: { keepAlive: true // 需要被缓存 }
    - активировано Запускается, когда компонент, содержащийся в keepalive, снова визуализируется
    - deactivated Запускается, когда компонент, содержащийся в keepalive, уничтожается
динамическая маршрутизация
- Создание: В основном в процессе использования атрибута пути используйте динамические параметры пути, начиная с двоеточия.
- Реагирование на изменение параметров маршрутизации
  1. this.$route.params
  2. смотреть (для отслеживания изменений) объект $route
```
watch: {
  $route(to, from){
    console.log(to.path)
    // 对路由变化做出响应
  }
}
```
  3. Используйте защиту навигации beforeRouteUpdate, представленную в версии 2.2.
Вложенные маршруты
- Вам нужно использовать дочернюю конфигурацию в параметрах VueRouter
навигация
- декларативный
```
<router-link :to="...
```
- программно
```
router.push(...)
```

Редиректы и псевдонимы

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

routes: [
    { path: '/a', redirect: '/b' }
  ]

псевдоним

routes: [
    { path: '/a', component: A, alias: '/b' }
  ]

Два режима Vue-маршрутизатора
- хэш-режим (по умолчанию)
  - Принцип: Принцип - это событие onhashchage, которое можно отслеживать на объекте окна.
  - Описание: То есть, добавляя # + имя маршрута после ссылки, в соответствии с изменением соответствия этого поля, запускается событие hashchange, и страница динамически отображается.
- режим истории
  - Описание: Воспользуйтесь преимуществами новых методов pushState() и replaceState() в интерфейсе истории HTML5.
  - недостаток
    1. Требуется поддержка конфигурации бэкэнда
    2. Если сервер не отвечает на ресурс при обновлении, будет обновлена ошибка 404.
Функция навигационного крюка (навигационная защита)
- «Навигация» означает, что маршрут меняется.
- эффект
  - Защита навигации, предоставляемая vue-router, в основном используется для защиты навигации путем перехода или отмены. Существует множество возможностей для внедрения процессов маршрутной навигации: глобальные, эксклюзивные для каждого маршрутизатора или на уровне компонентов.
- Что такое навигационная стража
  1. Глобальная передняя защита
    - router.beforeEach
  2. Global Parse Guard (новое в версии 2.5.0)
    - router.beforeResolve
  3. глобальный почтовый хук
    - afterEach
    - В отличие от сторожей, эти хуки не принимают на себя следующие функции и не меняют саму навигацию:
  4. Эксклюзивный охранник маршрута
    - до входа в охрану
  5. Ограждения внутри компонентов
    1. beforeRouteEnter : вызывается перед подтверждением соответствующего маршрута, отображающего компонент.
    2. beforeRouteUpdate: вызывается, когда текущий маршрут изменяется, но компонент используется повторно
    3. beforeRouteLeave: вызывается, когда навигация покидает соответствующий маршрут компонента.
- похожие темы
  1. Что такое vue-маршрутизатор? Что такое компоненты?
  2. Активный класс является свойством какого компонента?
    - active-class — это атрибут терминала router-link, который используется для переключения выбранного стиля.При нажатии на метку router-link этот стиль будет применен
  3. Как определить динамическую маршрутизацию vue-router? Как получить переданное значение?
  4. Какие навигационные крючки есть у vue-router?
  5. В чем разница между маршрутизаторами?
    - router — это экземпляр VueRouter, который является глобальным объектом маршрутизации, включая методы перехода маршрутизации, функции ловушек и т. д.
    - route — это объект информации о маршрутизации||объект маршрутизации перехода, каждый маршрут будет иметь объект маршрута, который является локальным объектом, включая путь, параметры, хэш, запрос, полный путь, сопоставление, имя и другие параметры информации о маршрутизации.
    - Переданный параметр — this.router, а полученный параметр — this.route.
  6. vue-router реагирует на изменение параметров маршрутизации
  7. параметры vue-маршрутизатора
  8. Два режима vue-router
  9. Vue-router реализует ленивую загрузку маршрутов (динамически загружаемые маршруты)
    - Компоненты, соответствующие разным маршрутам, делятся на разные блоки кода, а затем соответствующие компоненты загружаются при доступе к маршруту, что является ленивой загрузкой маршрута, что может ускорить скорость загрузки проекта и повысить эффективность.

15. Письмо МИ

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

16. Вью-инструкция

пользовательская директива
- Vue.directive
настроить фильтр
- Vue.filter('имя фильтра', function(){})

17. Вопросы для интервью, на которые можно ответить одним предложением

css работает только с текущим компонентом
- Просто напишите scoped в теге стиля, например: style scoped></style >
Разница между v-if и v-show
- v-если отображается в соответствии с условиями, v-show является блочным или не отображает;
Каковы два ядра vue.js?
- Компонентная система, управляемая данными
Несколько общих команд vue
- v-for, v-if, v-bind, v-on, v-show, v-else
Модификаторы, обычно используемые vue?
- предотвращение: отправка событий больше не перезагружает страницу; .stop: предотвращение всплытия события клика; .self: запуск, когда событие происходит на самом элементе, а не на дочернем элементе; .capture: прослушиватель событий, когда событие происходит, вызывается
Может ли v-on связать несколько методов?
- Могу
Какова роль значения ключа в *vue?
1. точнее
  - Когда Vue.js использует v-for для обновления отображаемого списка элементов, по умолчанию используется стратегия «повторное использование на месте». Использование ключей позволяет избежать повторного использования на месте. так будет точнее
2. Быстрее
  - Используйте уникальность ключа для генерации объекта карты для получения соответствующего узла, что быстрее, чем метод обхода
Что такое вычисляемое свойство в vue?
- Слишком много логики в шаблоне сделает его слишком тяжелым и трудным в обслуживании.Когда данные необходимо обрабатывать сложно и их можно использовать несколько раз, попробуйте применить метод вычисляемых свойств.
- выгода
  1. Сделать структуру обработки данных понятной
  2. В зависимости от данных данные обновляются, а результаты обработки обновляются автоматически
  3. Внутреннее this вычисляемого свойства указывает на экземпляр vm
  4. Когда шаблон вызывается, просто напишите имя вычисляемого свойства напрямую
  5. Метод getter обычно используется для получения данных, а метод set также может использоваться для изменения данных.
  6. По сравнению с методами, методы будут пересчитываться независимо от того, остаются ли зависимые данные неизменными, но когда зависимые данные остаются неизменными, вычисляемые получаются из кэша и не пересчитываются.
Одностраничные приложения (SPA), такие как vue, их преимущества и недостатки
- преимущество
  1. Пользовательский опыт хороший и быстрый, а изменения контента не требуют перезагрузки всей страницы, что позволяет избежать ненужных переходов и повторного рендеринга;
  2. Исходя из вышеизложенного, SPA относительно менее нагружает сервер.
  3. Обязанности front-end и back-end разделены, структура понятна, front-end отвечает за логику взаимодействия, а back-end — за обработку данных;
- недостаток
  1. Браузеры младших версий не поддерживаются, по крайней мере, только IE9;
  2. Загрузка домашней страницы в первый раз занимает немного больше времени
  3. Вы не можете использовать кнопки навигации браузера, вам нужно реализовать вперед и назад самостоятельно.
  4. Не способствует SEO-оптимизации (если вы хотите поддерживать SEO, рекомендуется рендерить компоненты через сервер)
Порядок выполнения функции привязки жизненного цикла родительского и дочернего компонентов Vue
- Загрузить процесс рендеринга
  - родитель beforeCreate -> созданный родитель -> родитель beforeMount -> дочерний beforeCreate -> созданный дочерний элемент -> дочерний beforeMount -> смонтированный дочерний элемент -> смонтированный родительский элемент
- Процесс обновления подкомпонента
  - родитель до обновления -> дочерний перед обновлением -> дочерний обновлен -> родительский обновлен
- Процесс обновления родительского компонента
  - родитель перед обновлением -> родитель обновлен
- процесс разрушения
  - родитель перед уничтожением -> дочерний перед уничтожением -> дочерний уничтожен -> родитель уничтожен
Почему данные являются функцией в компонентах Vue?
- Поскольку компонент используется для повторного использования, и объект в JS является эталонным соотношением, если данные в компоненте представляют собой объект, то объем не является изолированным, а значения атрибута данных в подкомпонент будут влиять на друг друга. Если параметр данных в компоненте является функцией, то каждый экземпляр может поддерживать независимую копию возвращаемого объекта, а значения атрибута данных между экземплярами компонентов не повлияют на друг друга; и экземпляр новых Vue не будет повторно , так что нет ссылочного объекта проблема