Я узнавал немного о Vue каждый день и постепенно усваивал его. сделать несколько заметок

диаграмма жизненного цикла：https://nicen.cn/collect/life.png

Vue-Routerизучать：https://nicen.cn/vue-router.html

начинать

• Официальный сайт Вью: https://vuex.vuejs.org/zh/
• Различные библиотеки пользовательского интерфейса на основе Vue.
  1. Vuetify ：https://vuetifyjs.com/zh-Hans
  2. Element-plusкомпоненты：https://element-plus.gitee.io/zh-CN
  3. Element-uiдокумент：https://element.eleme.cn/2.9/#/zh-CN
  4. VantМобильный терминалкомпоненты Библиотека：https://vant-contrib.gitee.io/vant
  5. Navie Ui：https://www.naiveui.com/zh-CN/light
  6. Antd：https://next.antdv.com/components/overview
  7. Ant Design：https://ant.design/index-cn
  8. Acro Design：https://arco.design/
• Material Design Icon китайский помощник по поиску：https://material.iconhelper.cn/
• Vuex является посвященным Vue.js разработка приложенийиз Модель государственного управления：https://vuex.vuejs.org/zh/
• Vue Loader это webpack из loader,Он позволяет создатьОднофайловые компоненты (SFC)изформат письма Vue компоненты
• Vue CLI этона основе Vue.js Для быстрой разработки полной системы CLI Сервис построен на webpack и webpack-dev-server Выше из.
• PHPstorm ElementUiкоднамекать：https://zhuanlan.zhihu.com/p/34735529
• ViteСледующее поколение инструментов фронтенд-разработки и сборки.：https://cn.vitejs.dev/
• Vue Antd Admin：https://iczer.gitee.io/vue-antd-admin-docs/
• Vue Routerизучать笔记：https://nicen.cn/vue-router.html
• Vue SSR：https://ssr.vuejs.org/zh

расширять

Vue CliПодробное объяснение：https://blog.csdn.net/six_six_six_666/article/details/82633731

Понимание документа

1. это команда

используется дляДинамические компоненты且на основе Ограничения шаблонов в DOMприйти на работу。Это расширение Ограничения HTML-тегов, динамическое указание компонентов.

2. слот, слот

Когда тег определен в компонентах,При вызове компонентов,компонентысередина этикеткииз Содержимое заменит тег。<AB>я вставляюизсодержание</AB>。слотизсодержание是существовать父级进行рендерингиз。vm.

Если необходимо несколько слотов, вы можете воспользоваться <slot> элементизспециальныйизхарактеристика：name для определения именованных слотов.

Предоставляя контент в именованный слот, мы можем сделать это в <template> Используется на элементах v-slot инструкции и с v-slot Параметры предоставляют свои имена в форме:

v-slot (сокращенно #) можно добавить только в шаблон (#slotName). Розетка без имени будет иметь неявное имя «по умолчанию». Есть только одно исключение. Когда компонент имеет только один слот по умолчанию, v-slot можно записать непосредственно в компоненте.

<main>
    <slot>中间可以定义默认содержание</slot>
</main>

/*Эксклюзивный слот по умолчанию*/
<current-user v-slot:default="slotProps"> 
     {{ slotProps.user.firstName }} 
</current-user>

<slot>可以существовать标签между定义默认содержание。когдаиспользоватькомпоненты未添加слотсодержание时,Будет отображен контент по умолчанию.

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

намекать

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

3. Динамические параметры команды

В инструкцию можно добавить динамические параметры, такие как имя атрибута привязки v-bind, имя события v-on и имя слота v-slot ([произвольное выражение JS]);

v-mydirective:[argument]="value"

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

argument Параметры можно обновлять на основе данных экземпляра компонента! Это позволяет гибко использовать пользовательские директивы в приложениях.

Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    var s = (binding.arg == 'left' ? 'left' : 'top')
    el.style[s] = binding.value + 'px'
  }
})

4. scopedи>>>、v-deep、depp()

Вы можете использовать оба в компоненте scoped Кадзуи scoped стиль по желанию; scoped Селектор в стиле может идти «глубже», например, влиять на дочерние компоненты, вы можете использовать >>> Оператор

<style scoped>
     .a >>> .b { /* ... */ }
</style>

5. v-bind.sync

модификаториз Подробное объяснение：https://www.jianshu.com/p/6b062af8cf01

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

<comp :foo.sync="bar"></comp>
/* расширятьдля */
<comp :foo="bar" @update:foo="val => bar = val"></comp>
/* когдаребеноккомпоненты需要更新 foo из значения необходимо явно вызвать событие обновления */
this.$emit('update:foo', newValue)

6. Скорость реагирования данных Vue

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

Замена целых объектов или массивов также останется отзывчивой.

Реакция массива и реактивный принцип:

https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95 https://cn.vuejs.org/v2/guide/reactivity.html 

7. Ключевое подробное объяснение

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

8. Виртуальный ДОМ

Vue создает виртуальный DOM, чтобы отслеживать, как он меняет реальный DOM.

return createElement('h1', this.blogTitle)

createElement 到底会返回什么呢？На самом деле нетэтоДействительный DOM элемент. Более точное название могло бы быть createNodeDescription,因для它所包含изинформация покажет Vue Какие узлы необходимо отображать на странице, включая информацию описания ее подузлов. Мы описываем такие узлы как «виртуальные узлы». (virtual node)”,也常简写它для“VNode”。“виртуальный DOM» — это наша ссылка на Vue Все дерево компонентов построено VNode Название дерева.

Методом создания VNode является createElement, например createElement (tag, {}, []) или createElement (tag, {}, string), где tag — это имя тега созданного элемента, «{}» — атрибут. созданного элемента, «[ ]» — это список дочерних элементов созданного элемента, а строка — это текст.

9. Функции и шаблоны рендеринга

官方документ：https://cn.vuejs.org/v2/guide/render-function.html

Шаблон (шаблон) Vue фактически компилируется в функцию рендеринга (рендер), а рендер и шаблон не существуют одновременно. Шаблон будет подвергнут рендерингу, затем будет получен Vnode, а затем обновлен на странице.

В функции Render в Vue есть параметр. Этот параметр обычно называется h. Фактически, этот h называется createElement. Функция Render помещает возвращаемое значение createElement в HTML. В функции createElement есть 3 параметра.

• Первый параметр (обязательный параметр): в основном используется для предоставления контента DOMизhtml.,Тип может быть строкой, объектом или функцией.
• Второй параметр (тип — объект,Необязательный）：используется для设置这个DOMизнекоторые стили、свойство、Передать параметры、Привязка событий и тому подобное.
• Третий параметр (тип — массив,Тип элемента массива — VNode.,Необязательно): в основном относится к тому факту, что под этим узлом есть другие узлы.,Используется для настройки распространения контента.,Включает новые дополнительные компоненты. Уведомление,компоненты Все VNodes в дереве должны быть уникальными.

/* @return {VNode} */
createElement(
 /* {String | Object | Function} */
 /* Строка тега HTML, объект параметра или функция, тип возвращаемого значения которой — String/Object. Этот параметр является обязательным */
 'div',

 /* {Object} */
 /* Объект данных, содержащий атрибуты, связанные с шаблоном, чтобы мы могли добавить эти атрибуты в шаблон. Этот параметр не является обязательным. */
{
     attrs: {
        name: headingId,
        href: '#'+headingId
    },
     style: {
        color: 'red',
        fontSize: '20px'
    },
     'class': {
        foo: true,
        bar: false
      },
      /* Свойства DOM */
      domProps: {
         innerHTML: 'baz'
      },
      /* компонентыprops */
       props: {
          myProp: 'bar'
      },
       /* Прослушивание событий основано на 'on' */
       /* Поэтому он больше не поддерживается как 'v-on:keyup.enter' модификатор */
       /* Необходимо сопоставить вручную KeyCode */
       on: {
           click: function(event) {
                event.preventDefault();
                console.log(111);
          }
        }
  }

 /* {String | Array} */
 /* Дочерние узлы (VNodes) состоят из createElement() построен. Дополнительные параметры */
 /* или Простой изиспользовать строку для генерации из «текстовый узел». */
[
   'xxxx',
   createElement('h1', «заголовок»)
   createElement(MyComponent, {
     props: {
       someProp: 'xxx'
    }
  }),

  /*Получаем контент в слот по умолчанию*/
   this.$slots.default
]
)

Разница между двумя

• Шаблон подходит для простой логики, а рендеринг — для сложной логики.
• Пользовательский шаблон относительно прост для понимания, но он недостаточно гибок; пользовательская функция рендеринга очень гибкая, но предъявляет более высокие требования к пользователям.
• рендеринг: более высокая производительность,Производительность шаблона низкая. Мы можем взглянуть на это,Блок-схему vueкомпонентырендерингиз можно увидеть на рисунке ниже.
• Судя по предыдущему пункту,Мы знаем это из блок-схемы vueкомпонентырендеринга.,Использование функции рендеринга рендеринга не требует процесса компиляции,Кому интересно отдать код прямо в программу. так,использоватьк этомуиспользоватьтребовательный,и подвержен ошибкам
• Render Приоритет функции из выше, чем у шаблона из, но следует отметить, что из представляет собой синтаксис Mustache (двойная фигурная скобка) и не может быть использован повторно.

Практическое применение:

render: function (createElement) {
  // `<div><slot></slot></div>`
  return createElement('div', this.$slots.default)
}

10. directives

Используется для регистрации пользовательской директивы.

11. Стратегия слияния миксинов vue

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

Загрязнение策略Подробное объяснение：https://cn.vuejs.org/v2/guide/mixins.html 

Глубокое понимание компонентов

• Категория: неоднофайловые компоненты (обычно определяются непосредственно в html), однофайловые компоненты (из.Vue под CLI),компоненты：создавать、зарегистрироваться、использовать。
• Vue.extend({}),Используется для создания компонентов (каждый вызов генерирует и возвращает отдельный класс VueComponent). элементы конфигурации данных могут быть только функциональными,использовать Форма объекта находится вкомпоненты Повторное использование приведет к дублированию ссылок.изобъект.
• Vue.component(),Используется для регистрации глобальных компонентов. Объект элемента конфигурации можно передать напрямую.,Когда это утверждение называется,Vue сама вызовет функцию расширения.
• Объекты экземпляра Vue — это класс объектов Vue (из этого в объекте элемента конфигурации — Vue), а компоненты — это все объекты класса VueComponent (из этого в объекте элемента конфигурации — VueComponent).
• существоватьVue2.x中程序结构для：Vmобъект->Vcобъект->одинокийили НесколькоVcобъект->одинокийили НесколькоVcобъект；
• компоненты Внутриизиспользоватьизкомпонентыобъект都可以существоватькомпонентыобъектизchildrenсвойствонайден в。
• Родительский компонент передает значение useprops дочерним компонентам, а дочерние компоненты передают значение родительскому компоненту. Компоненты передают метод объекта родительских компонентов привязки пользовательских событий datause для обработки событий.
• v-ifиv-showиз разницы: ifisпользоватьv-show,выключателькомпоненты,Он просто показывает и скрывает соответствующие компоненты, в то время как v-if уничтожит предыдущие компоненты и отрисует новые. Если мы переключимся за пределы v-if изкомпоненты,Наклеить на этикетку,Тогда данные, которые должны быть уничтожены, будут кэшированы. Когда мы переключимся обратно, мы всё равно произведем повторный рендеринг (невозможно найти соответствующий элемент издома),Но экземпляр izvue не был уничтожен раньше,В экземпляре vue атрибуты и переменные все еще присутствуют.,Этот тег очень подходит для одностраничных приложений.
• Все компоненты имеют полный жизненный цикл.
• Vue.extends(),Используется для наследования конфигурации компонентов.

1. Динамические компоненты

keep-alive При упаковке динамических компонентов экземпляры неактивных компонентов кэшируются, а не уничтожаются. и transition сходство, является абстрактным компонентом: он не отображает DOM элемент не появится в цепочке родительских компонентов компонента. Соответствующие компоненты можно установить с помощью реквизита.

Когда компонент <keep-alive> переключается внутри, его activated и deactivated Эти две функции перехвата жизненного цикла будут выполняться соответствующим образом.

<!-- Динамические компоненты Зависит от vm Примеры `componentId` property контроль -->
<component :is="componentId"></component>

<!-- Вы также можете зарегистрировать рендерингизкомпонентыили prop входящие изкомпоненты -->
<component :is="$options.components.child"></component>
component,рендеринг одного «компонента Юань" является динамическим компонентом,Решить, какие компоненты является рендерингом.

2. Асинхронные компоненты

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

Пучок webpack 2 и ES2015 Синтаксис складывается, и мы можем использовать динамический импорт следующим образом:

Vue.component(
  'async-webpack-example',
  // Этот динамический импорт вернет `Promise` объект.
  () => import('./my-async-component')
)

Подробное описание：https://blog.csdn.net/Liu_Jun_Tao/article/details/81913946

3.Развернуть

У каждой функции есть прототип (явный объект-прототип), и сама функция также является объектом с атрибутом __proto__.

Каждый объект имеет атрибут __proto__ (прототип, указывающий на конструктор, неявный объект-прототип).

Объект-прототип также имеет атрибут, называемый конструктором. Этот атрибут содержит указатель, указывающий на исходный конструктор.

материал

vue componentсоздаватьключевые ссылки：https://blog.csdn.net/uciaqgjj/article/details/104915699

vueасинхронныйкомпонентыпринцип：https://blog.csdn.net/uciaqgjj/article/details/104923335

Обработка границ：https://cn.vuejs.org/v2/guide/components-edge-cases.html

Реквизит Атрибут

1. Полное заявление о реквизите

app.component('my-component', {
  props: {
    // Базовая проверка типов (`null` и `undefined` Значения пройдут любую проверку типа)
    propA: Number,
    // Несколько возможных типов
    propB: [String, Number],
    // Обязательно из строки
    propC: {
      type: String,
      required: true
    },
    // Со значением по умолчанию из числа
    propD: {
      type: Number,
      default: 100
    },
    // Объект со значением по умолчанию из
    propE: {
      type: Object,
      // Значение Object илиArrayizDefault должно быть возвращено из фабричной функции.
      default() {
        return { message: 'hello' }
      }
    },
    // Пользовательская функция проверки
    propF: {
      validator(value) {
        // Это значение должно соответствовать одной из следующих строк:
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // Функция со значением по умолчанию из
    propG: {
      type: Function,
      // В отличие от значения объекта или массива по умолчанию, это не заводская функция — это используется как значение по умолчанию из функции.
      default() {
        return 'Default function'
      }
    }
  }
})

2. Передайте объект

Если вы хотите передать все свойства объекта в качестве реквизита, вы можете использовать v-bind без параметров (используйте v-bind вместо :prop-name).

<blog-post v-bind="post"></blog-post>
//эквивалентно
<blog-post v-bind:id="post.id" v-bind:title="post.title"></blog-post>

Краткое описание проблемы

1. Разница между вычисляемыми свойствами и пользовательскими методами

• методыметодиcomputedвычислитьсвойство,Конечный результат обоих методов совершенно одинаков;
• другойиз是вычислитьсвойство是на основе它们из Реактивные зависимости для кэшированияиз。只существовать相关响应式依赖发生改变时它们才会重新求值,Доступ к вычисляемому свойству несколько раз немедленно вернет ранее вычисленный результат.,без необходимости повторного выполнения функции.
• методыметод,Каждый раз, когда срабатывает повторный рендеринг,Вызов метода всегда приведет к повторному выполнению функции.
• так,Официальный сайт в одном предложении,для любой сложной логики,Вы должны всекогдаиспользоватьвычислитьсвойство。
• 虽然вычислитьсвойство Параметры могут передаваться через замыкания,Но это уже нарушает вычисленные свойства,такиспользоватьвычислитьсвойство Это не так хорошо, как передача параметровиспользоватьmethods。

2. Практические замечания

/* начинатьшаблонрендеринг */
this.$nextTick(function() {
     /* Сделать добавленный ввод автоматически получать фокус */
     this.$refs.addInput.focus();
 })				

3. Динамически установите ссылку на элемент и получите объект элемента.

1. Первый,Обязательно обратите внимание на получение ссылки после создания элемента dom.,В противном случае полученное из не определено.,или Репортер сообщил, что из-за ошибки не существует метода getAtrribute.,Решениеиспользовать$nextTick。
2. Нет необходимости добавлять разные ссылки к каждому элементу циклического списка.,И просто добавьте ко всем им одну и ту же ссылку.,Получите список массивов изэто на основе этой ссылки,Затем вы можете найти элемент по индексу
3. Апплет WeChat не может управлять Dom,так$refs无法获取Внутри置компонентыизузел。
4. когда ref и v-for Вместе вы получите из ref воляэто Содержит соответствующие источники данныхиз这些ребеноккомпонентыизмножество。refs Вступит в силу только после завершения рендеринга компонентов, и они не отвечают. Это служит лишь «аварийным люком» для прямого манипулирования подпунктами — вам следует избегать доступа к ним в шаблоне или вычисляемых свойствах. refs。

Дополнительные знания

1. Глобальная шина событий

Шина: компонент связывает событие, другой компонент запускает событие и передает данные через событие.

Vue2.x может использовать внедрение и предоставлять интерфейсы для замены глобальной шины событий.

Vue 2 где шина событий передается в существующем Vue Создайте новый в экземпляре приложения. Vue Экземпляр, поведение, инициируемое событием, реализуется через этот экземпляр. Более широкая коммуникация по состоянию компонента Но очевидно из использования видно, что это решение является относительно громоздким. Vue 3 В версии,ребенок孙компонентымеждуиз Статусная связь имеет новыйизплан：Provide / Inject

предпосылка:

1. Должно бытьon、off、
2. Должен быть доступен для всех компонентов.
3. Самый простой и лаконичный метод реализации.

/*создаватьvm*/
new Vue({
	el:'#app',
	render: h => h(App),
	beforeCreate() {
		Vue.prototype.$bus = this /*Установить глобальную шину событий*/
	},
})

Глобальная шина событий подходит для ситуаций передачи данных, отличных от родительско-дочернего и дочернего-отцовского. Вы можете использовать экземпляр Vue как свойство объекта-прототипа Vue в событии beforeCreate Vue, чтобы удовлетворить всем вышеуказанным условиям. Все компоненты могут получить доступ к объекту шины, используя this.$bus.

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

2. Свойства монитора

watch API изflushварианты могли бы быть лучшеконтрольперезвонитьизвремя。它可以设置для 'pre'、'post' или 'sync'。

官方документ：https://v3.cn.vuejs.org/api/instance-methods.html#watch

изменение (не замена) Если объект представляет собой массив, старое значение будет таким же, как новое значение, поскольку они относятся к одному и тому же объекту/массиву. Вю Копия значения до изменения не сохраняется. Для значений, отличных от базовых типов, все назначения являются ссылками, поэтому все будет одинаково.

user.user = res.data.data;
  /* res.data.data = news = olds  = user.user */
  /* Они ссылаются на оба исходных объекта */
 watch(user.user,function (news,olds) {
}

3.provide、inject

provide() {
    return {
      foo: this.foo,
      bar: this.bar
   }
}