Обмен технологиями

Реактивный ref() и реактивный()

2024-07-08

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina


реф()

  • эффект: Определить адаптивные переменные.

  • грамматика:let xxx=ref(начальное значение).

  • возвращаемое значение: объект-экземпляр RefImpl, называемый объектом ref или ref. Атрибут значения объекта ref является адаптивным.

  • будь осторожен

    1. Для данных операции в JS требуется: xxx.value, но .value в шаблоне не требуется, просто используйте его напрямую.
    2. Для let name =ref('Чжан Сан') name не реагирует, name.value реагирует.

реактивный()

  • эффект: Определите адаптивные объекты (не используйте его для базовых типов, используйте ref, иначе будет сообщено об ошибке).

  • грамматика:let отзывчивый объект = реактивный (исходный объект).

  • возвращаемое значение: экземпляр объекта Proxy, называемый адаптивным объектом.

  • будь осторожен: Отзывчивые данные, определенные как реактивные, являются «глубокими».

реф против реактивного

  • С точки зрения макроса:
    1. ref используется для определения: данных базового типа, данных типа объекта;
    2. реактивный используется для определения: данных типа объекта.
  • разница:
    1. Переменные, созданные с помощью ref, должны использовать значение (вы можете использовать плагин volar для автоматического добавления значения).
    2. Reactive переназначает новый объект и теряет отзывчивость (вы можете использовать 0object.assign, чтобы заменить его целиком).
  • Принципы использования:
    1. Если вам нужен базовый тип адаптивных данных, вы должны использовать ссылку.
    2. Если вам нужен адаптивный объект, иерархия не глубокая, можно использовать либо ref, либо реактивный.
    3. Если вам нужен адаптивный объект с глубокой иерархией, рекомендуется использовать реактивный.

toRefs и toRef

эффект: Преобразование каждого атрибута адаптивного объекта в объект ссылки.
Примечание: toRefs имеет ту же функцию, что и toRef, но toRefs можно конвертировать пакетно.
Синтаксис следующий:

import {reactive,toRefs,toRef} from
// 数据
let person = reactive({
	name:'张三
	age:18
})
let {name,age} = toRefs(person)
let nl = toRef(person,'age')