Интенсивное чтение "API функций Vue3.0"

JavaScript Vue.js

1. Введение

Выпуск Vue 3.0 вызвал бурю негодования, так что давайте расшифруем егоfunction api RFCУзнайте больше о том, что думает команда Vue!

Во-первых, официальные ответы на некоторые из наиболее волнующих вопросов:

Есть ли какие-то изменения для Vue 3.0, такие как Python 3/Angular 2?

Нет, на 100 % совместим с Vue 2.0, и пока не планируется прекращать поддержку каких-либо API (и в будущем). Раньше была попытка сделать это, но она была отозвана из-за многочисленных отзывов пользователей.

Завершен ли дизайн Vue 3.0?

Нет, черновик этого интенсивного чтения называется RFC (Request For Comments), что переводится на китайский язык как «Черновик для комментариев», и до сих пор запрашиваются мнения всех.

Почему этот RFC такой сложный?

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

Сам по себе Vue Mutable + Template предназначен для того, чтобы быть простой в использовании инфраструктурой (конвенция + естественность) и сложной в реализации (анализ + двойное связывание).

Это изменение очень похоже на имитацию React, почему бы не использовать React напрямую?

Во-первых, не изменился механизм Template, а во-вторых, он имитирует Hooks вместо всего React.Если вам не нравится это изменение, значит, вы не захотите использовать React.

PS: Человек, который задал этот вопрос, не должен понимать React и Vue одновременно.На самом деле, эти два фреймворка сейчас совершенно разные, и они будут подробно объяснены позже в интенсивном чтении.

Ниже приведено официальное введение в API функций Vue 3.0.

2. Обзор

Базовая демонстрация функционального Vue:

<template>
  <div>
    <span>count is {{ count }}</span>
    <span>plusOne is {{ plusOne }}</span>
    <button @click="increment">count++</button>
  </div>
</template>

<script>
import { value, computed, watch, onMounted } from 'vue'

export default {
  setup() {
    // reactive state
    const count = value(0)
    // computed state
    const plusOne = computed(() => count.value + 1)
    // method
    const increment = () => { count.value++ }
    // watch
    watch(() => count.value * 2, val => {
      console.log(`count * 2 is ${val}`)
    })
    // lifecycle
    onMounted(() => {
      console.log(`mounted`)
    })
    // expose bindings on render context
    return {
      count,
      plusOne,
      increment
    }
  }
}
</script>

Запись функционального стиляsetupФункция может пользоваться следующими преимуществами после использования стиля функции: тип определяется автоматически, что уменьшает объем упаковки.

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

import { value } from 'vue'

const MyComponent = {
  setup(props) {
    const msg = value('hello')
    const appendName = () => {
      msg.value = `hello ${props.name}`
    }
    return {
      msg,
      appendName
    }
  },
  template: `<div @click="appendName">{{ msg }}</div>`
}

Чтобы быть осторожным,value()То, что возвращается, является объектом через.valueчтобы получить доступ к его истинному значению.

Зачемvalue()Как насчет возврата Wrappers вместо конкретных значений? Причина в том, что Vue использует двустороннюю привязку, и только доступ к значению в виде объекта может гарантировать доступ к конечному значению, что аналогично React.useRef()API.currentправило.

Так как всеvalue()Возвращаемое значение — Wrapper, поэтому вы хотите вызывать его, когда используете его непосредственно для шаблона?.valueШерстяная ткань?Ответ — нет, вы можете использовать его напрямую, шаблон автоматическиUnwrapping:

const MyComponent = {
  setup() {
    return {
      count: value(0)
    }
  },
  template: `<button @click="count++">{{ count }}</button>`
}

ДалееHooksНиже приведен пример получения положения мыши в реальном времени с помощью крючков:

function useMouse() {
  const x = value(0)
  const y = value(0)
  const update = e => {
    x.value = e.pageX
    y.value = e.pageY
  }
  onMounted(() => {
    window.addEventListener('mousemove', update)
  })
  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })
  return { x, y }
}

// in consuming component
const Component = {
  setup() {
    const { x, y } = useMouse()
    const { z } = useOtherLogic()
    return { x, y, z }
  },
  template: `<div>{{ x }} {{ y }} {{ z }}</div>`
}

можно увидеть,useMouseИнкапсулирует всю логику, связанную с «обработкой положения мыши», что на первый взгляд очень похоже на React Hooks, но есть два отличия:

  1. useMouseизменение функцииx,yне перезапустится послеsetupвоплощать в жизнь.
  2. x yВы получаете Wrapper вместо исходного значения, и это значение будет меняться динамически.

Другим важным API являетсяwatch, который действует как React HooksuseEffect, но принцип реализации и время вызова на самом деле совершенно разные.

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

const MyComponent = {
  props: {
    id: Number
  },
  setup(props) {
    const data = value(null)
    watch(() => props.id, async (id) => {
      data.value = await fetchData(id)
    })
  }
}

Зачемwatch, потому что в VuesetupФункция выполняется только один раз, поэтому, в отличие от React Function Component, каждый раз, когда компонентpropsИзменения вносятся повторно, то ли в переменные, то ли в переменные,propsЕсли вы хотите что-то сделать при изменении, вам нужно обернуть это вwatchсередина.

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

3. Прекрасное чтение

Для функционального API + хуки Vue 3.0 и функционального компонента React + хуки автор проводит некоторые сравнения.

Логическая структура Vue и React

React Function Component и Hooks, несмотря на то, что между Immutable и Mutable, JSX и Template с Vue3.0 есть различия с точки зрения принципа реализации, они имеют сходство в логическом понимании.

const MyComponent = {
  setup(props) {
    const x = value(0)

    const setXRandom = () => {
      x.value = Math.random()
    }

    return { x, setXRandom }
  },
  template: `
    <button @onClick="setXRandom"/>{{x}}</button>
  `
}

Хотя в Vue,setupФункция выполняется только один раз, что выглядит совершенно иначе, чем функция React (функция React выполняется каждый раз), но на самом деле Vue отделяет слой рендеринга (Template) от слоя данных (настройки), а React объединяется.

Мы можем использовать React Hooks, чтобы полностью изолировать слой данных от слоя рендеринга:

// 类似 vue 的 setup 函数
function useMyComponentSetup(props) {
  const [x, setX] = useState(0)

  const setXRandom = useCallback(() => {
    setX(Math.random())
  }, [setX])

  return { x, setXRandom }
}

// 类似 vue 的 template 函数
function MyComponent(props: { name: String }) {
  const { x, setXRandom } = useMyComponentSetup(props)

  return (
    <button onClick={setXRandom}>{x}</button>
  )
}

Это связано с фундаментальной разницей между JSX и Template. JSX позволяет писать шаблон и JS вместе, поэтому слой данных и слой рендеринга можно писать вместе (или разделять), но идея шаблона, принятая Vue, требует разделения слоя данных, что также делает разделение кода более понятным. .

На самом деле, Vue3.0setupЭта функция также необязательна, и благодаря поддерживаемой ею функции TSX единственное отличие от React — это действительно Mutable:

// 这是个 Vue 组件
const MyComponent = createComponent((props: { msg: string }) => {
  return () => h('div', props.msg)
})

Нам сложно оценить качество Template и JSX, но для более глубокого понимания Vue и React нам необходимо выйти за рамки JSX&Template, Mutable&Immutable, по сути, убрать техническое выделение, которое не имеет ничего общего с этими двумя фреймворками. , React@16 и Vue@3 были очень похожи.

Суть Vue3.0 заключается в изучении концепции React Hooks, поэтому вы можете использовать Hooks для имитации функции настройки Vue в React.

Что касается выбора этих двух наборов технологий, то это уже относительно идеальное сочетание, не рекомендуется реализовывать паттерн, аналогичный Mutable + JSX, в JSX (потому что, если вам нравится Mutable, вы можете использовать Vue):

  • Vue: изменяемый + шаблон
  • Реагировать: неизменяемый + JSX

Что действительно влияет на привычки кодирования, так это Mutable и Immutable.Если вы используете Vue, вы должны твердо использовать Mutable, а если вы используете React, вы должны твердо использовать Immutable.Это может максимизировать ценность двух фреймворков.

Различия между Vue Hooks и React Hooks

Давайте сначала посмотрим на простой синтаксис React Hooks:

const [ count, setCount ] = useState(0)

const setToOne = () => setCount(1)

Простой синтаксис для Vue Hooks:

const count = value(0)

const setToOne = () => count.value = 1

Причина, по которой React возвращаетсяcountявляется числом из-за правила Immutable, и Vue возвращаетcountэто объект, который имеетcount.valueсвойств, а также из-за правила Vue Mutable, которое делает все переменные, определенные в Vue, похожими на переменные в React.useRefОпределите переменные, чтобы не было Reactcapture valueхарактеристики.

Для получения дополнительной информации о значении захвата вы можете прочитатьИнтенсивное чтение «Компоненты класса Function VS» Введение в Capute Value

Кроме того, механизм изменения значения для хуков также отличается.Давайте посмотрим на код Vue:

const Component = {
  setup() {
    const { x, y } = useMouse()
    const { z } = useOtherLogic()
    return { x, y, z }
  },
  template: `<div>{{ x }} {{ y }} {{ z }}</div>`
}

из-заsetupФункция выполняется только один раз, как это сделать, когдаuseMouseПривести кx,yПри изменении значения вы можетеsetupчтобы получить последнее значение?

В РеакцииuseMouseесли измененоxзначение, затем используйтеuseMouseФункция будет выполнена повторно, чтобы получить последнююx, в то время как в Vue хуки глубоко объединены с Immutable путем обертыванияx.value, так что когдаxПри изменении ссылка остается прежней, меняется только значение. Итак, Vue использует механизм мониторинга Proxy для выполненияsetupФункция не выполняется повторно, а возникает эффект повторного рендеринга шаблона.

Это преимущество Mmutable, в Vue Hooks нет необходимостиuseMemo useCallback useRefи другие механизмы, только одинvalueФункция, интуитивно понятная модификация Mutable, вы можете добиться набора эффектов оптимизации производительности Immutable в React, в этом прелесть Mutable.

Преимущества Vue-хуков

Автор делает расширенное объяснение сравнения хуков Vue и React в RFC:

Первая самая большая разница:setupВыполняется только один раз, в то время как React Function Component выполняется каждый раз при рендеринге.

Использование кода Vue больше соответствует интуиции JS.

Это предложение напрямую затрагивает слабость JS. JS не предназначен для Immutable, поэтому Mutable очень естественен, а Immutable неудобен.

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

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

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

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

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

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

Vue Hooks имеет только одну ссылку, поэтому хранимый контент очень компактен, то есть занимает небольшой объем памяти, и при изменении значения не будет повторно срабатыватьsetupвыполнение, поэтому это не вызывает давления GC.

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

Одна из проблем с React Hooks заключается в том, что они полностью полагаются на неизменяемые свойства.Когда функция создается внутри функционального компонента, каждый раз создается новый объект, и если этот объект будет передан подкомпоненту, это неизбежно приведет к тому, что подкомпонент не сможет выполнить оптимизацию производительности.Итак, React принимаетuseCallbackВ качестве плана оптимизации:

const fn = useCallback(() => /* .. */, [])

Новая ссылка возвращается, только если изменяется второй зависимый параметр. Но для второго параметра зависимости требуется инструмент lint, чтобы убедиться, что зависимость всегда верна (что касается того, почему вам нужно быть честным со своими зависимостями, вы можете двигаться дальшеИнтенсивное чтение «Введение в функциональный компонент» — всегда будьте честны с зависимостями).

Еще во Vue 3.0 из-заsetupОн выполняется только один раз, поэтому сама функция будет создана только один раз, нет проблемы с несколькими экземплярами, нет необходимостиuseCallbackконцепция, нет необходимости использоватьплагин lintУбедитесь, что зависимости написаны правильно, что очень удобно для разработчиков.

Не нужно использоватьuseEffect useMemoи другие оптимизации производительности, все оптимизации производительности выполняются автоматически.

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

а такжеuseEffectВторой параметр «зависимости» тоже нужно передавать, во Vue вообще нет необходимости передавать «зависимости», поэтому нет проблемы, что пользователи случайно передают неправильно, и нет необходимости писать плагин lint, как у React для обеспечения правильной зависимости пол. (Это также то, что я хочу пожаловаться на React Hooks. Как команда React гарантирует, что у всех установлен lint? Даже если lint установлен, если в IDE есть ошибка, и она не действует, возможно писать «опасный код», который зависит от неправильных зависимостей в любое время. Вызывая серьезные последствия, такие как бесконечный цикл)

4. Резюме

Сравнивая Vue Hooks и React Hooks, можно обнаружить, что Vue 3.0 прекрасно сочетает функцию Mutable с Hooks, избегая некоторых недостатков React Hooks. Таким образом, мы можем сказать, что Vue заимствует идеи у React Hooks, но создает более красивое произведение искусства.

Однако у Immutable, за которым следуют React Hooks, есть и хорошая сторона, то есть состояние стабильно затвердевает при каждом рендеринге, и вам не нужно беспокоиться о влиянии внезапных изменений состояния (на самом деле, вы должны платить внимание на влияние неизменения состояния) Для данных Стабильность записи и работы программы очень предсказуема.

Наконец, для разработчиков, которым нравится Mutable, лучше всего подойдет Vue 3.0.Некоторые небольшие колеса на основе React + Mutable могут быть не так хороши, как Vue 3.0. Для разработчиков React: придерживайтесь своих незыблемых убеждений, Vue 3.0 довел Mutable до крайности, и только функции React Immutable можно максимизировать, чтобы максимизировать ценность React.

Адрес обсуждения:Интенсивное чтение «API функций Vue3.0» · Выпуск № 173 · dt-fe/weekly

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

Сфокусируйся наАккаунт WeChat для интенсивного чтения в интерфейсе

Заявление об авторских правах: Бесплатная перепечатка - некоммерческая - не производная - сохранить авторство (Лицензия Creative Commons 3.0)

Категории