Последний прогресс Vue 3.0, Composition API

в предыдущей статьеПредварительная версия Vue 3.0, знакомство с Vue Function API, автор постаралсяvue-function-api, грядущий функциональный API Vue 3.0 я испытал заранее.В конце статьи автор выдвинул некоторые мысли. Недавно Vue официально выпустила последнюю редакцию API 3.0 и, полностью приняв мнения сообщества, скорректировала Vue Function API на Vue Composition API, предоставив библиотеку, которая может использовать этот API заранее в Vue 2.x.@vue/composition-api, я заранее ознакомился с этой библиотекой в учебных целях. В сочетании с предыдущей статьей опишите некоторые исправления, внесенные в API официальной командой Vue после принятия комментариев сообщества.

В этой статье в основном обсуждается последний Composition API в следующих темах:

reactive API
ref API
смотреть изменения API
вычисляемые изменения API
Изменения хуков жизненного цикла
Поддержка TypeScript и JSX

Composition API можно охарактеризовать как последнюю «поправку», предназначенную для исправления многих проблем с Function API.Ниже приведено сравнение предыдущих.vue-function-api, что изменилось?

`state`Переименовать в`reactive`

существуетvue-function-apiв, черезstateСоздайте отзывчивый объект. Отзывчивый объект, созданный этим состоянием, не является объектом-оболочкой, и его не нужно использовать..valueчтобы получить значение. Но проблема в следующем:stateОбычно его используют в качестве имени переменной для описания объекта состояния компонента Vue, что легко ввести разработчиков в заблуждение.Официальная команда Vue считает, чтоstateAPI переименованreactiveболее элегантный,reactiveЭквивалент Vue 2.xVue.observable(), Используется для получения объекта отвечающего агента объекта:

const obj = reactive({ count: 0 });

value переименовывается в ref и предоставляет isRef и toRefs

существуетvue-function-apiв, черезvalueФункция создает объект-оболочку, содержащий реактивное свойство.value. После того, как официальная команда Vue полностью приняла участие сообщества, этот API был изменен наref.refСоздавая объект-оболочку, содержащий только одно свойство ответа формулыvalue, если объект указан какrefзначение, объект будетreactiveМетод обхода глубины. Вы должны знать, что причина, по которой Composition API был предложен и использован, заключается в том, чтобы упростить нам повторное использование компонентов и передачу состояния через функциональный процесс, потому чтоJavaScriptПараметры функции передаются по значению, а базовые типы не имеют ссылок.Чтобы обеспечить отзывчивость свойств, используйтеrefдля создания объекта-оболочки для передачи.

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

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

поставкаisRefИспользуется для проверки того, является ли объектrefОбъект:

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

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

// 风格一：通过基本类型变量来声明状态
let x = 0;
let y = 0;

function updatePosition(e) {
 x = e.pageX;
 y = e.pageY;
}

// --- compared to ---

// 风格二：通过单一对象来声明状态
const pos = {
 x: 0,
 y: 0,
};

function updatePosition(e) {
 pos.x = e.pageX;
 pos.y = e.pageY;
}

Если разработчик привык стилизовать один, обычноrefПреобразуйте переменную базового типа в адаптивный объект-оболочку, чтобы сделать его адаптивным, и, если это второй стиль, просто создайтеreactiveобъект.

Однако рассмотрим следующий сценарий:

function useMousePosition() {
 const pos = reactive({
 x: 0,
 y: 0,
 });

 // ...
 return pos;
}

// consuming component
export default {
 setup() {
 // 对象解构将会导致响应式会被丢失
 const { x, y } = useMousePosition();
 return {
 x,
 y,
 };

 // 拓展运算符将导致响应式丢失
 return {
 ...useMousePosition()
 }

 // 只有这样才能保证响应式不被丢失
 // 通过pos.x的pos.y来取值才会保留x，y的响应式
 return {
 pos: useMousePosition()
 }
 }
};

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

function useMousePosition() {
 const pos = reactive({
 x: 0,
 y: 0
 });

 // ...
 return toRefs(pos);
}

// x 和 y 现在具备了响应式
const { x, y } = useMousePosition();

toRefsБудуreactiveОбъекты Преобразование в обычные объекты, где каждый атрибут результирующего объекта указывает на соответствующие атрибуты исходного объекта.refСсылочные объекты, которые полезны при составлении функций, возвращают реактивное состояние, что гарантирует, что разработчики, использующие деструктуризацию объектов или операторы расширения, не потеряют ответ исходного реактивного объекта.

`watch`Работает на одной функции

по сравнению с описанным в предыдущей статьеwatchМетод передачи параметров API, последний@vue/composition-apiВ поправке,watchМетод доставки может сходиться к одной функции, которую Vue 3.x будет выполнять при изменении зависимого реактивного состояния.watchФункция обратного вызова:

const count = ref(0);

watch(() => console.log(count.value)); // 打印0

setTimeout(() => {
 count.value++; // 打印1
}, 100);

`computed`можно пройти в`get`а также`set`, который определяет модифицируемое вычисляемое свойство

Ниже показан базовый пример, аналогичный Vue 2.x, можно определить изменяемые вычисляемые свойства.

const count = ref(1);
const plusOne = computed({
 get: () => count.value + 1,
 set: val => { count.value = val - 1 }
});

plusOne.value = 1;
console.log(count.value); // 0

крючки жизненного цикла

в сравнении сvue-function-api,@vue/composition-apiудаленonBeforeCreateа такжеonCreated. потому чтоsetupвсегда вызывается при создании экземпляра компонента, т.е.onBeforeCreateпосле иonCreatedзвонил раньше, так чтоonBeforeCreateа такжеonCreatedбудет доступноsetupзаменять.

Использование TypeScript и JSX

setupТеперь поддерживает возврат функции рендеринга, эта функция возвращает JSX, JSX может напрямую использовать объявление вsetupРеактивное состояние прицела:

export default {
 setup() {
 const count = ref(0);
 return () => (<div>{count.value}</div>);
 },
};

Примечание: при использованииTypeScript, при желании использовать следующее должно быть объявлено в пространстве имен JSXinterface:

// file: shim-tsx.d.ts
import Vue, { VNode } from 'vue';
import { ComponentRenderProxy } from '@vue/composition-api';

declare global {
 namespace JSX {
 // tslint:disable no-empty-interface
 interface Element extends VNode { }
 // tslint:disable no-empty-interface
 interface ElementClass extends ComponentRenderProxy { }
 interface ElementAttributesProperty {
 $props: any; // specify the property name to use
 }
 interface IntrinsicElements {
 [elem: string]: any;
 }
 }
}

Кроме того, для лучшего соответствияTypeScriptДля определения типа рекомендуется Vue Composition API.createComponentопределить компонент так, чтобыVueСделайте вывод типа:

import { createComponent } from 'vue';

export default createComponent({
 props: {
 foo: String,
 },
 setup(props) {
 console.log(props.foo);
 },
});

резюме

Эта статья является предыдущей статьей автораПредварительная версия Vue 3.0, знакомство с Vue Function APIПродолжение Vue Composition API в основном описывает изменения Vue Composition API по сравнению с предыдущим черновиком Vue Function API.Вы можете видеть, что официальные лица Vue пересмотрели многие проблемы в черновике Vue Function API в ответ на предложения сообщества. В следующей статье автор объяснит принцип адаптивного объекта Vue Composition API и углубит понимание Vue Composition API в процессе интерпретации и изучения.

stateПереименовать вreactive