Введение в изменения Vue3.0

4/17 beta
7/18 RC GitHub.com/vUEJS/RFCs/…
Документ RFC:github.com/vuejs/rfcs

Оптимизации, которые четко воспринимаются конечным пользователем

Производительность: производительность выше, чем у версии 2.
Поддержка Tree Shake: вы можете «обрезать» бесполезные модули и упаковать только то, что вам нужно.
API композиции: API композиции
Фрагмент, Телепорт, Задержка: Добавлена собственная функция "Фрагмент", Телепорт - это Портал, "Задержка"
Улучшенная поддержка TypeScript: Улучшенная поддержка Ts
Custom Renderer API: предоставляет пользовательский API рендеринга.

Performance

Переписать реализацию виртуального дома и обеспечить совместимость
Оптимизация скомпилированного шаблона
- Почему: vdom по-прежнему требует времени для рендеринга различий
- Как это сделать: Скомпилируйте и оптимизируйте основную программу
  - Прямое создание императивного дома на основе шаблонов [angular]
  - Метод сравнения vue2.x представляет собой рекурсивное сравнение всех узлов, а vue 3 использует шаблон анализа для оптимизации содержимого различий во время компиляции.
- держи вдом причина
  - Учитывайте совместимость v2 с функцией рендеринга jsx
  - Предоставляет более гибкий и сложный способ написания DOM в дополнение к хорошему шаблону, особенно для авторов библиотек.
Более эффективная инициализация компонентов
- Создание экземпляров компонентов значительно оптимизировано по сравнению со временем, затрачиваемым чистым js:
  - Производительность обновления улучшена в 1,3~2 раза.
  - Производительность крепления улучшена в 1,3-1,5 раза.
  - Скорость SSR увеличена в 2~3 раза

vdom

vue-next-template-explorer.netlify.app

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

Узкое место в производительности традиционного vdom

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

Оптимизация скомпилированного шаблона

Пример:

<div>
  <span>static!</span>
  <span>{{ msg }}</span>
  <span id="id">{{ msg }}</span>
  <span :id="id">{{ msg }}</span>
</div>

Разделите разные блоки и статические узлы и узлы динамической привязки

Содержимое после метода _createVNode называется patchFlag, который представляет собой подсказку, сгенерированную во время компиляции.На этапе исправления vnode update он отмечает, отслеживает ли узел изменения.
/* ТЕКСТ*/ Флаг нужен только для отслеживания изменений текста msg
Связывание динамических узлов никак не связано с уровнем вложенности, все узлы напрямую связаны в корне и блоке узла
Привязка атрибутов также одинакова: статически записанные атрибуты будут созданы только один раз при создании и не будут отслеживаться в дальнейшем; динамически привязанные атрибуты patchFlag изменятся соответствующим образом.

Оптимизированный объем памяти во время выполнения hoistStatic

Продвижение и повторное использование большого количества статических узлов

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

Когда данные статического узла очень велики, статический узел будет вставлен непосредственно в форме innerHtml.

кеш прослушивателя событий cacheHandler

<div>
  <span @click="onclick">static!</span>
</div>

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

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

Даже если связанная функция является встроенной, она будет кэширована

Преимущества кэширования событий в компонентах еще более выражены в компонентах.

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

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

Tree-shaking

Вы можете "обрезать" бесполезные модули и упаковать только то, что вам нужно (типа v-model, , они не будут упакованы, если они не используются).
- Мы все используем в проекте какие-то инструменты сборки, такие как Webpack и Rollup.Все эти инструменты имеют функцию встряхивания дерева, при условии, что для записи нужно все импортировать, но инструменты не могут выполнять встряхивание дерева для самой библиотеки. Поэтому v3 сама будет выполнять некоторые операции при упаковке кода и импортировать только те модули, которые используются. Конечно, некоторые необходимые модули, такие как алгоритм обновления vdom и отзывчивая система, обязательно будут включены в пакет.
- Пример
```
<div>
  <input v-model="model" ></input>
  <input v-model="model" type="text"></input>
  <input v-model="model" :type="text"></input>
  <input v-model="model" type="checkbox"></input>
</div>
```
Размер простого «HelloWorld» составляет всего: 13,5 КБ.
- 11,75 КБ, только Composition API.
  - В версии 2 есть некоторые API-интерфейсы Option, которые не могут выполнять встряхивание дерева, и может быть предоставлен переключатель для принудительного удаления этого API-интерфейса Option позже.
Включая полную функциональность среды выполнения: 22,5 КБ
- Имеет больше функций, но меньше, чем v2.

API композиции API композиции

Может использоваться с существующим API параметров.
Гибкая логическая комбинация и повторное использование
Отзывчивые модули v3 можно использовать с другими фреймворками.

Миксины больше не рекомендуются, а Composition API обеспечивает более гибкое повторное использование кода без побочных эффектов.

Composition API можно понимать как недавно добавленный API, и он не влияет на использование исходного API.

Официальный документ RFC:композиция-API.v UE JS.org/API.HTML#color…

Дополнительные сведения см. в разделе Введение в Composition API.

Фрагменты

Больше не ограничивается одним корневым узлом в шаблоне
- В Vue2 шаблон может иметь только один корневой узел, но в Vue3 можно записать несколько корневых узлов, и корневой узел автоматически станет _Fragment в функции рендеринга [Пример]
Функция рендеринга также может возвращать массив, подобно реализации React.Fragments.
'Just works'

Teleport

Телепорт изначально был эталоном React Portal (добавление нескольких новых функций, усиление)

Но поскольку у Chrome есть предложение, будет добавлен нативный элемент с именем Portal. Во избежание конфликтов имен он будет изменен на Teleport.

Главное, что нужно сделать:Прямой декларативный способ монтирования дочерних компонентов в другом месте DOM.

Простой пример:

<body>
  <div id="app">
    <h1>Move the #content with the portal component</h1>
    <teleport to="#endofbody">
      <div id="content">
        <p>
          this will be moved to #endofbody.<br />
          Pretend that it's a modal
        </p>
        <Child />
      </div>
    </teleport>
  </div>
  <div id="endofbody"></div>
  <script>
    new Vue({
      el: "#app",
      components: {
        Child: { template: "<div>Placeholder</div>" }
      }
    });
  </script>
</body>

Мы получим следующий результат:

<teleport>Все дочерние элементы - в этом примере:
и<Child>будет добавлен к
как один из этих детей<Child>компоненты все равно будут<teleport>дочерние компоненты родителя, т.е.<teleport>прозрачный

<div id="app">
  <!-- -->
</div>
<div id="endofbody">
  <div id="content">
    <p>
      this will be moved to #endofbody.<br />
      Pretend that it's a modal
    </p>
    <div>Placeholder</div>
  </div>
</div>

Документ RFC:GitHub.com/vUEJS/RFCs/…

Используйте документацию:portal-vue.linusb.org/

suspense

Suspense переводится как «ожидание» [экспериментальная функция].

Вложенные асинхронные зависимости можно ожидать во вложенных иерархиях.
- Отрисовывается в памяти до того, как вложенное дерево компонентов будет отображено на экране. Записывайте все компоненты с асинхронными зависимостями в процессе рендеринга и визуализируйте все дерево в DOM только после разрешения всех асинхронных зависимостей.
служба поддержкиasync setup()
- Если в компоненте используется асинхронная функция setup(), компонент будет рассматриваться как асинхронный компонент, а приостановка будет ожидать разрешения всех промисов в асинхронной функции setup() перед рендерингом всего дерева.
Поддержка асинхронных компонентов

Улучшенная поддержка TypeScript

Vue 3 — это библиотека, написанная на typeScript, позволяющая пользоваться автоматическими подсказками определения типов.
API в JavaScript и TypeScript одинаковый.
- На самом деле, код в основном тот же.
Поддержка TSX.
Компоненты класса по-прежнему будут поддерживаться, но необходимо ввести vue-class-component@next, который все еще находится на стадии альфа-тестирования.

Vue 3 + TypeScriptПлагин:

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

Пользовательский API рендеринга Пользовательский API рендеринга

Идет интеграция NativeScript Vue, что открывает больше низкоуровневых функций.
Пользователи могут попробовать собственный модуль визуализации WebGL для использования с обычными приложениями Vue (Vugel).

Это означает, что в будущем программирование webgl можно будет выполнять с помощью программирования vue и Dom. Заинтересованные могут посмотреть здесь:Getting started vugel

Попробуйте способ Vue3

Codepen
Начните свой проект с Vite:
```
npm init vite-app hello-vue3
```
vite — это новый инструмент, что в переводе с французского означает «быстрый». адрес:github.com/vuejs/vite

простойhttpсервер, не нуженwebpackСкомпилируйте и упакуйте, как требуетсяVueфайл, отправленный непосредственно обратно на рендеринг, и поддерживает горячее обновление (очень быстрое)

другие части

Большинство официальных виджетов фреймворка также поддерживают v3. Последний статус:GitHub.com/v UE JS/v UE-вы…
Документация V3 была обновлена:v3.vuejs.org(Примечание. Новая документация (особенно руководство по миграции) все еще находится в разработке и будет дорабатываться на этапе RC.)
Devtools Beta одобрен для использования в Интернет-магазине Chrome (Примечание: для devtools требуется vue@^3.0.0-rc.1)

v2 также имеет версию 2.7
- Будет последняя минорная версия (2.7)
- отVue 3Улучшения совместимости Backport (без нарушения совместимости)
- добавить вVue 3Предупреждения об устаревании для функций, удаленных в
- LTS18 месяцев.

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

Экспериментальная функция

<Suspense>
<script setup>
<style vars>

Эти функции теперь выпущены для сбора отзывов о фактическом использовании, но они все еще могут получать критические изменения/корректировки. Они могут оставаться экспериментальными в 3.0 и со временем стать частью 3.1.

CompositionAPI

Самым большим изменением в версии 3 является добавление Composition API, вдохновленного React Hook, Этот API коренным образом изменит программирование vue, но версия 3 по-прежнему совместима с API параметров версии 2. Кроме того, были введены некоторые несовместимые модификации, подробнее см.Vue3 объединил RFC.

Сначала рассмотрим пример:

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup(props, context) {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })
    
    function increment() {
      state.count++
    }
    
    return {
      state,
      increment
    }
  }
}
</script>

Видно, что компоненты версии 3 в целом такие же, как и компоненты версии 2. Они состоят из шаблона, сценария и стиля. Внесены следующие изменения:

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

API опций и API композиции

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

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

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

Отсутствие чистого и бесплатного механизма для извлечения и повторного использования логики в нескольких компонентах. (Связанный"Логическое извлечение и повторное использование"подробнее)

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

В начальном механизме RFC также можно увидеть, что Composition API предназначен для устранения различных дефектов и недостатков Option API, когда v2 имеет дело с большими и сложными проектами.

организация кода

Options API заключается в написании классификации кода в нескольких вариантах:

export default {
  components: {
    
  },
  data() {
    
  },
  computed: {
    
  },
  watch: {
    
  },
  mounted() {
    
  },
}

Когда компонент относительно прост и имеет только несколько логик, не так уж сложно переключаться между параметрами, но что происходит, когда в компоненте vue несколько логик?

При использовании Options API одна и та же логика прописывается в разных местах, а код каждой логики переплетается, это отнюдь не простая задача для разработчиков, которые сопровождают чужие коды, на понимание этих кодов уходит много времени .
При использовании Composition API одна и та же логика может быть написана в том же месте, и эту логику можно даже извлечь с помощью функций.Границы между каждой логикой четкие.Даже если вы поддерживаете чужой код, вы не потратите слишком много на "Чтение кода" Время.

Логическое извлечение и мультиплексирование

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

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

В vue3 предусмотрен метод Composition Function, который позволяет извлекать логику как функцию:

<template>
  <div>
   <p> {{count}}</p>
    <button @click="onClick" :disabled="state">Start</button>  
  </div>
</template>

<script>
  import {ref} from 'vue'
  // 倒计时逻辑的Composition Function
  const useCountdown = (initialCount) => {
    const count = ref(initialCount)
    const state = ref(false)
    const start = (initCount) => {
      state.value = true;
      if (initCount > 0) {
        count.value = initCount
      } 
      if (!count.value) {
        count.value = initialCount
      }
      const interval = setInterval(() => {
        if (count.value === 0) {
          clearInterval(interval)
          state.value = false
        } else {
          count.value--
        }
      }, 1000)
    }
    return {
      count,
      start,
      state
    }
  }
  
  export default {
   setup() {
    // 直接使用倒计时逻辑
     const {count, start, state} = useCountdown(10)
     const onClick = () => {
        start()
     }
     return  {count, onClick, state}
   }
  }
</script>

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

Поддержка типа ТС

Еще один распространенный запрос от разработчиков в более крупных проектах — это лучшая поддержка TypeScript. Текущий API Vue представляет некоторые проблемы при интеграции с TypeScript, в основном из-за зависимости Vue от одногоthisконтекст для отображения свойств иthisИспользование компонентов Vue более волшебно, чем обычный JavaScript (например.thisвложенный вmethodsуказывать на экземпляр компонента вместоmethodsвнутреннюю функцию объекта ниже точки). Другими словами, существующий API Vue просто не разработан с учетом вывода типов и создает большую сложность при попытке заставить его хорошо работать с TypeScript.

v2 поддерживает ts в основном через vue-class-component, и нужно ввести пакет зависимостей, и недостаток тоже очень очевиден: чтобы Class API решил проблему с типом, он должен полагаться на декоратор — это очень нестабильное предложение фазы 2, существует много неопределенности в деталях реализации.

По сравнению с v2 поддержка v3 для ts намного лучше:

В v3 программирование выполняется в настройках, настройка не зависит отthis, Большинство API-интерфейсов в основном используют обычные переменные и функции, которые, естественно, дружественны к типам.
Код, написанный с помощью Composition API, может использовать полный вывод типов практически без подсказок типа вручную. Это также означает, что код, написанный с помощью предлагаемого API, будет выглядеть почти одинаково на TypeScript и на простом JavaScript.
Эти интерфейсы получили лучшую поддержку IDE, и даже пользователи, не использующие TypeScript, могут извлечь из них пользу.

Введение в API композиции

setup

setup — это опция, добавленная в vue, которая является точкой входа для использования Composition API в компоненте. Этот контекст не используется в настройке.

Время звонка

SETUP выполняется после создания экземпляра компонента VUE и завершает инициализацию PROPS, а также выполняется перед хуком BeforeCreate, что означает, что переменные в других опциях (таких как DATA) не могут использоваться в Setup, в то время как другая Option может использовать переменные, возвращенные в программе установки.
использование шаблона

Если установка возвращает объект, все свойства этого объекта будут объединены в контекст рендеринга шаблона, что означает, что свойства объекта, возвращенные установкой, могут использоваться в шаблоне.
```
<template>
  <div>{{ count }} {{ object.foo }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    setup() {
      const count = ref(0)
      const object = reactive({ foo: 'bar' })

      // expose to template
      return {
        count,
        object
      }
    }
  }
</script>
```
Использовать с функцией рендеринга/jsx

setup также может возвращать функцию рендеринга, аналогичную методу рендеринга в vue2.
```
import { h, ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const object = reactive({ foo: 'bar' })

    return () => h('div', [count.value, object.foo])
  }
}
```
параметры настройки

У настройки есть два параметра. Первый параметр — реквизит, то есть все параметры компонента. Как и в vue2, параметры реагируют, и изменения вызывают обновление; второй параметр — это контекст настройки, который включает такие свойства, как испускают.
```
const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.emit
  }
}
```
использование этого

this is not available inside setup(). Since setup() is called before 2.x options are resolved, this inside setup() (if made available) will behave quite differently from this in other 2.x options. Making it available will likely cause confusions when using setup() along other 2.x options. Another reason for avoiding this in setup() is a very common pitfall for beginners

И API параметров, и API композиции поддерживаются в версии 3. Поскольку setup() будет вызываться до того, как будет проанализирован API параметров, this внутри setup() указывает на совершенно другой API, что может вызвать путаницу.

Поэтому этот контекст не используется в настройке.

reactive

reactiveФункция берет объект и возвращает этому объекту реактивный прокси. Это эквивалентно Vue.obserable() в версии 2.

const obj = reactive({ count: 0 })

ref

Функция ref принимает значение для инициализации и возвращает реактивный и модифицируемый объект ref. Объект ref имеет атрибут value, который содержит значение объекта ref.

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

isRef

isRefИспользуется для определения того, является ли переменная объектом ссылки.

const unwrapped = isRef(foo) ? foo.value : foo

toRefs

toRefs используется для преобразования реактивного объекта в обычный объект, все свойства которого являются объектами ref.

const state = reactive({
  foo: 1,
  bar: 2
})
const stateAsRefs = toRefs(state)
/*
Type of stateAsRefs:
{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

toRefs в возвращаемом значении установки или функции композиции может гарантировать, что объект по-прежнему является соответствующим выражением после использования синтаксиса деструктурирования.

import {reactive, toRefs} from 'vue'
function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })
  return state
}
function useFeature2() {
  const state = reactive({
    a: 1,
    b: 2
  })
  return toRefs(state)
}

export default {
  setup() {
    // 使用解构之后foo和bar都丧失响应式
    const { foo, bar } = useFeatureX()
    // 即便使用了解构也不会丧失响应式
    const {a, b}= useFeature2()
    return {
      foo,
      bar
    }
  }
}

computed

Вычисляемая функция согласуется с вычисляемой функцией в vue 2. Она получает функцию и возвращает неизменяемый отзывчивый объект ref, значение которого является возвращаемым значением геттера.

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2
plusOne.value++ // error,computed不可改变


// 同样支持set和get属性
onst count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: val => { count.value = val - 1 }
})
plusOne.value = 1
console.log(count.value) // 0

readonly

Функция только для чтения принимает объект (обычный объект или реактивный объект) или ссылку и возвращаеттолько чтениеИсходный прокси-объект параметра, когда объект параметра изменяется, возвращаемый прокси-объект также изменяется соответствующим образом. Если передается реактивный объект или объект ответа ref, возвращаемый объект также является реактивным.

Короче говоря, он создает копию переданного объекта только для чтения.

const original = reactive({ count: 0 })

const copy = readonly(original)

watchEffect(() => {
  // 原始对象的变化会出发副本的watch
  console.log(copy.count)
})

// 原始对象改变，副本的值也会改变
original.count++

// 副本不可更改
copy.count++ // warning!

watchEffect

Запуск функции сразу после трассировки ее зависимостей и повторный запуск при изменении зависимостей.

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> logs 0

setTimeout(() => {
  count.value++
  // -> logs 1
}, 100)

отменить наблюдение

Интерфейс возвращает функцию, которая отменяет наблюдение.
```
const stop = watchEffect(() => {
  /* ... */
})
// later
stop() // 取消之后对应的watchEffect不会再执行
```
явные побочные эффекты(побочный эффект)

Зачем нужно очищать побочные эффекты? Есть такой сценарий, когда в часах выполняется асинхронная операция, асинхронная операция еще не выполнялась, в это время срабатывают вторые часы, и в это время нужно очистить последнюю асинхронную операцию.
```
watch(onInvalidate => {
  const token = performAsyncOperation(id.value)
  onInvalidate(() => {
    // id has changed or watcher is stopped.
    // invalidate previously pending async operation
    token.cancel()
  })
})
```
watch предоставляет функцию очистки побочных эффектов onInvalidate, которая получает функцию, в которой выполняется очистка побочных эффектов. Вызывается, когда:
- Когда обратный вызов часов должен быть выполнен во второй раз.
- Когда часы остановлены, т.е. после выгрузки компонента

Интерфейс также поддерживает настройку некоторых параметров для изменения поведения по умолчанию.Параметры конфигурации можно передать через последний параметр watch.

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

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

Это поведение можно настроить с помощью flush, который имеет три значения, а именно:post(По умолчанию),preа такжеsync.syncУказывает, что он вызывается синхронно при обновлении состояния,preУказывает, что он вызывается перед обновлением компонента.
```
watchEffect(
  () => {
    /* ... */
  },
  {
    flush: 'sync'
  }
)
```
onTrack и onTrigger для отладки:
- onTrack: вызывается, когда реактивное свойство или ссылка отслеживаются как зависимость.
- onTrigger: вызывается, когда обратный вызов наблюдателя запускается из-за изменения зависимости.
```
watchEffect(
  () => {
    /* side effect */
  },
  {
    onTrigger(e) {
      debugger
    }
  }
)
```
onTrack и onTrigger доступны только в режиме разработки.

watch

По сравнению с часами v2, интерфейс часов Composition API не только извлекает свою логику, но и добавляет некоторые функции.

Основное использование

const state = reactive({count: 0})
const inputRef = ref('')
// state.count与inputRef中任意一个源改变都会触发watch
watch(() => {
  console.log('state', state.count)
  console.log('ref', inputRef.value)
})

Укажите источник зависимостей

 const state2 = reactive({count: ''})
 const ref2 = ref('')
 // 通过函数参数指定reative依赖源
 // 只有在state2.count改变时才会触发watch
 watch(
   () => state2.count,
   () => {
     console.log('state2.count',state2.count)
     console.log('ref2.value',ref2.value)
   })
// 直接指定ref依赖源
watch(ref2,() => {
  console.log('state2.count',state2.count)
  console.log('ref2.value',ref2.value)
})

смотреть несколько источников данных

const state = reactive({a: 'a', b: 'b'})

watch(
  // state.a和state.b任意一个改变都会触发watch的回调
  () => [state.a, state.b],
  // 回调的第二个参数是对应上一个状态的值
  ([a, b], [preA, preB]) => {
    console.log('callback params:', a, b, preA, preB)
    console.log('state.a', state.a)
    console.log('state.b', state.b)

const ref1 = ref(1)
const ref2 = ref(2)
watch([ref1, ref2],([val1, val2], [preVal1, preVal2]) => {
  console.log('callback params:', val1, val2, preVal1, preVal2)
  console.log('ref1.value:',ref1.value)
  console.log('ref2.value:',ref2.value)
})

Функция и использование watchEffect также применимы к просмотру [Отменить наблюдение/очистить побочные эффекты/сбросить/отладить]

Lifecycle Hooks

Composition API, конечно же, также предоставляет обратные вызовы для обработчиков жизненного цикла компонентов.

import { onMounted, onUpdated, onUnmounted } from 'vue'

const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  }
}

Сравните хуки жизненного цикла vue2