Прежде чем я написал блог, чтобы представить новые функции Vue3, кратко разобрался с функциями Vue3, а в конце статьи я покажу вам немного опыта работы с Vue3.Composition APIпростое использование
Предыдущая статьяАдрес:Следуйте по стопам Юды, чтобы заранее познакомиться с новыми функциями Vue3, вы еще не знакомы с Vue3, верно?
Потому что в начале этого месяца я поставил перед собой небольшую цель, научиться базовому использованию Vue3 и использовать Vue3 для самостоятельного выполнения небольшого проекта (небольшое раскрытие, я сделал небольшой инструмент, и теперь ему 90 лет). % завершено, это До конца месяца я покажу вам в форме блога и предоставлю идеи дизайна, пожалуйста, с нетерпением ждите...), в этой статье будет часто сравниваться Vue2 с введением Vue3, а также объясните каждый API в сочетании с примерами кода, которые предназначены не только для вашего собственного понимания. Резюме, и я надеюсь, что оно может вам помочь.
Вы также можете прочитать некоторые из моих предыдущих статей 👇👇 Я новичок в Nuggets, и я представлюсь вам позже.
- Цикл событий в браузере и среде Node
- Расскажите об использовании и различиях между CommonJS и модулем ES6.
Введение
Как мы все знаем, различные версии Vue3 выпускались одна за другой, и многие команды уже приступили к разработке различных библиотек и обновлению Vue2 до Vue3.Конечно, мы не должны отставать, так что поторопитесь и обновите свой Vue2 to Vue3, следуйте Давайте изучим новый API вместе с этой статьей
Для метода обновления вы можете нажать на статью в начале этой статьи.В предыдущей статье естьУчебник уровня няниРасскажите всем, как обновить
2. Текст
Vue2 каждый раз импортирует весь Vue, например, Vue2main.jsкод в файле
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
Но очевидно, что использовать все API Vue в нашем проекте невозможно, поэтому многие модули на самом деле бесполезны.
Затем в Vue3 разработчики могут использовать множество API-интерфейсов.Мы можем импортировать необходимые API-интерфейсы из Vue в соответствии с нашими собственными потребностями. Напримерmain.jsкод в
import { createApp } from 'vue';
import App from './App.vue'
createApp(App).mount('#app')
воспользовалсяimportиexportСинтаксис импорта и экспорта проекта реализует функцию упаковки модулей по запросу, а размер файла после упаковки проекта значительно меньше.
Это также то, что нам нужноVue3 APIПричины узнать больше
(1) установка
setupфункция такжеComposition APIФункция входа, наши переменные и методы определены в этой функции, давайте посмотрим на использование
<template>
<div id="app">
<p>{{ number }}</p>
<button @click="add">增加</button>
</div>
</template>
<script>
// 1. 从 vue 中引入 ref 函数
import {ref} from 'vue'
export default {
name: 'App',
setup() {
// 2. 用 ref 函数包装一个响应式变量 number
let number = ref(0)
// 3. 设定一个方法
function add() {
// number是被ref函数包装过了的，其值保存在.value中
number.value ++
}
// 4. 将 number 和 add 返回出去，供template中使用
return {number, add}
}
}
</script>
используется в приведенном выше кодеrefфункция, о которой будет подробно рассказано ниже, здесь нужно только понимать, что ее роль заключается в обертывании отзывчивых данных, и вы можете использоватьrefПеременные, заключенные в функции, рассматриваются как Vue2.dataпеременные в
Таким образом, легко реализовать функцию добавления 1 к номеру кнопки нажатия.
В Vue2 мы получаем доступdataилиpropsВсе переменные передаются через что-то вродеthis.numberПолучается в таком виде, но следует отметить, что в настройке,thisуказывает наundefined, то есть его больше нельзя передавать как Vue2thisчтобы получить переменную
Итак, как получитьpropsА данные в ?
фактическиsetupФункция также имеет два параметра, которыеprops,context, первый хранит имена параметров и соответствующие значения, которые определяют текущий компонент, чтобы позволить внешнему миру пройти; последний является объектом контекста, к которому можно получить доступ изattr,emit,slots
вemitЭто знакомый метод общения с родительским компонентом в Vue2, который можно вызвать напрямую.
(2) Жизненный цикл
Vue2 имеетbeforeCreate,created,beforeMount,mounted,beforeUpdateРавная функция жизненного цикла
В Vue3 эти части жизненного цикла изменились, а также изменился способ вызова.Давайте поместим диаграмму изменений ниже для краткого понимания.
| Vue2 | Vue3 |
|---|---|
| beforeCreate | setup |
| created | setup |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestory | onBeforeUnmount |
| destoryed | onUnmounted |
Эти вызовы жизненного цикла Vue3 также очень просты, также начиная сvueимпортировать, а затем сделать прямой вызов
<template>
<div id="app"></div>
</template>
<script>
// 1. 从 vue 中引入 多个生命周期函数
import {onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, unMounted} from 'vue'
export default {
name: 'App',
setup() {
onBeforeMount(() => {
// 在挂载前执行某些代码
})
onMounted(() => {
// 在挂载后执行某些代码
})
onBeforeUpdate(() => {
// 在更新前前执行某些代码
})
onUpdated(() => {
// 在更新后执行某些代码
})
onBeforeUnmount(() => {
// 在组件销毁前执行某些代码
})
unMounted(() => {
// 在组件销毁后执行某些代码
})
return {}
}
}
</script>
(3) реактивный
reactiveМетод используется для создания отзывчивого объекта данных, API также хорошо разрешается Vue2 черезdefinePropertyПодводные камни реализации реагирования на данные
Использование очень простое, просто передайте данные в качестве параметра, код выглядит следующим образом
<template>
<div id="app">
<!-- 4. 访问响应式数据对象中的 count -->
{{ state.count }}
</div>
</template>
<script>
// 1. 从 vue 中导入 reactive
import {reactive} from 'vue'
export default {
name: 'App',
setup() {
// 2. 创建响应式的数据对象
const state = reactive({count: 3})
// 3. 将响应式数据对象state return 出去，供template使用
return {state}
}
}
</script>
(4) исх.
Представляемsetupфункция, которую мы использовалиrefФункция обертывает отзывчивый объект данных, который на поверхности выглядит какreactiveКажется, что функция точно такая же, она почти такая же, потому чтоrefчерезreactiveОбертывает объект, а затем передает значение объекту вvalueатрибут, который объясняет, почему нам нужно добавлять каждый раз, когда мы посещаем.value
Мы можем просто положитьref(obj)понять такreactive({value: obj})
Здесь мы пишем кусок кода, чтобы увидеть в деталях
<script>
import {ref, reactive} from 'vue'
export default {
name: 'App',
setup() {
const obj = {count: 3}
const state1 = ref(obj)
const state2 = reactive(obj)
console.log(state1)
console.log(state2)
}
}
</script>
Посмотрите на результат печати
Уведомление:ссылаясь на здесь
.valueвsetupдоступ в функцииrefЕго нужно добавлять только тогда, когда обернутый объектtemplateОн не нужен при доступе в шаблоне, потому что во время компиляции он будет автоматически распознан, является ли онrefв упаковке
Итак, как мы выбираемrefиreactiveШерстяная ткань?
предположение:
- Значение примитивного типа (
String,Nmuber,Booleanи т.д.) или однозначные объекты (что-то вроде{count: 3}поэтому объекты только с одним значением свойства) используйтеref - значение ссылочного типа (
Object,Array)использоватьreactive
(5) кСм.
toRefзаключается в преобразовании значения в объекте в ответные данные, которые получают два параметра, первый параметрobjобъект; второй параметр — это имя свойства в объекте
код показывает, как показано ниже:
<script>
// 1. 导入 toRef
import {toRef} from 'vue'
export default {
setup() {
const obj = {count: 3}
// 2. 将 obj 对象中属性count的值转化为响应式数据
const state = toRef(obj, 'count')
// 3. 将toRef包装过的数据对象返回供template使用
return {state}
}
}
</script>
Но на поверхности кажетсяtoRefЭтот API кажется очень бесполезным, потому что эту функцию также можно использоватьrefРеализация, код выглядит следующим образом
<script>
// 1. 导入 ref
import {ref} from 'vue'
export default {
setup() {
const obj = {count: 3}
// 2. 将 obj 对象中属性count的值转化为响应式数据
const state = ref(obj.count)
// 3. 将ref包装过的数据对象返回供template使用
return {state}
}
}
</script>
На первый взгляд похоже на правду.На самом деле разница между ними есть.Можем сравнить через кейс.Код такой
<template>
<p>{{ state1 }}</p>
<button @click="add1">增加</button>
<p>{{ state2 }}</p>
<button @click="add2">增加</button>
</template>
<script>
import {ref, toRef} from 'vue'
export default {
setup() {
const obj = {count: 3}
const state1 = ref(obj.count)
const state2 = toRef(obj, 'count')
function add1() {
state1.value ++
console.log('原始值：', obj);
console.log('响应式数据对象：', state1);
}
function add2() {
state2.value ++
console.log('原始值：', obj);
console.log('响应式数据对象：', state2);
}
return {state1, state2, add1, add2}
}
}
</script>
Мы используемrefиtoRefбудетobjсерединаcountПреобразовано в адаптивное и объявлено два метода для созданияcountЗначение увеличивается, и исходное значение печатается после каждого увеличенияobjи обернули реагирующие объекты данных, а также просматривая изменения в представлении
ссылка:
Видно, что когда значение ответных данных выполняется
+1После операции вид изменился, исходное значение не изменилось, а также изменилось значение отзывчивого объекта данных, а это значит, чтоrefэтокопировать, не повлияет на исходное значение, и представление будет обновляться синхронно после изменения значения адаптивного объекта данных.
toRef:
Видно, что когда значение ответных данных выполняется
+1После операции вид не изменился, исходное значение изменилось, а также изменилось значение отзывчивого объекта данных, а это значит, чтоtoRefэтоЦитировать, повлияет на исходное значение, но будет ли обновлено представление после изменения значения адаптивного объекта данных.
Суммировать:
-
refявляется копией входящих данных;toRefявляется ссылкой на входящие данные -
refИзменение значения обновит представление;toRefИзменения значения представления не будут обновлять представление
(6) к ссылкам
пониматьtoRefПосле этого легко понятьtoRefsТеперь его функция состоит в том, чтобы преобразовать значения всех атрибутов входящего объекта в реагирующие объекты данных, Эта функция поддерживает один параметр, а именноobjобъект
Давайте посмотрим на его основное использование
<script>
// 1. 导入 toRefs
import {toRefs} from 'vue'
export default {
setup() {
const obj = {
name: '前端印象',
age: 22,
gender: 0
}
// 2. 将 obj 对象中属性count的值转化为响应式数据
const state = toRefs(obj)
// 3. 打印查看一下
console.log(state)
}
}
</script>
Результат печати следующий:
Возвращается объект, содержащий каждый обернутый объект реагирующих данных.
(7) поверхностный реактивный
Слушая название этого API, становится известно, что это неглубокийreactive, значит оригинал?reactiveЭто глубоко, да, это API для оптимизации производительности.
на самом деле будетobjпередается как параметр вreactiveПри создании реактивного объекта данных, еслиobjЕсли существует более одного уровня, то будет использоваться каждый уровень.ProxyУпакуйте один раз, давайте проверим
<script>
import {reactive} from 'vue'
export default {
setup() {
const obj = {
a: 1,
first: {
b: 2,
second: {
c: 3
}
}
}
const state = reactive(obj)
console.log(state)
console.log(state.first)
console.log(state.first.second)
}
}
</script>
Взгляните на распечатку:
Представьте, что если иерархия объектов глубокая, то каждый уровень использует
ProxyПосле упаковки это очень недружелюбно к производительности
Далее посмотримshallowReactive
<script>
import {shallowReactive} from 'vue'
export default {
setup() {
const obj = {
a: 1,
first: {
b: 2,
second: {
c: 3
}
}
}
const state = shallowReactive(obj)
console.log(state)
console.log(state.first)
console.log(state.first.second)
}
}
</script>
Взгляните на распечатку:
Результат очень четкий, только первый слой
ProxyОн обрабатывается, то есть только при изменении значения первого слоя он будет обновлен в ответ.Код выглядит следующим образом:
<template>
<p>{{ state.a }}</p>
<p>{{ state.first.b }}</p>
<p>{{ state.first.second.c }}</p>
<button @click="change1">改变1</button>
<button @click="change2">改变2</button>
</template>
<script>
import {shallowReactive} from 'vue'
export default {
setup() {
const obj = {
a: 1,
first: {
b: 2,
second: {
c: 3
}
}
}
const state = shallowReactive(obj)
function change1() {
state.a = 7
}
function change2() {
state.first.b = 8
state.first.second.c = 9
console.log(state);
}
return {state}
}
}
</script>
Рассмотрим конкретный процесс:
Сначала мы нажали вторую кнопку и изменили второй слой
bи третий слойc, хотя значение изменилось, но вид не обновился;
Когда мы нажали первую кнопку, мы изменили первый слойa, обновляется весь вид;
Отсюда можно объяснить, чтоshallowReactiveЗначение свойства первого слоя отслеживается, и как только значение изменяется, представление обновляется.
(8) мелкийСм.
это неглубокоref,иshallowReactiveТо же самое используется для оптимизации производительности
shallowReactiveИспользуется ли изменение данных первого слоя прослушивающего объекта для управления обновлением представления, а затемshallowRefмонитор.valueЗначение изменяется, чтобы обновить вид
Давайте посмотрим на конкретный код
<template>
<p>{{ state.a }}</p>
<p>{{ state.first.b }}</p>
<p>{{ state.first.second.c }}</p>
<button @click="change1">改变1</button>
<button @click="change2">改变2</button>
</template>
<script>
import {shallowRef} from 'vue'
export default {
setup() {
const obj = {
a: 1,
first: {
b: 2,
second: {
c: 3
}
}
}
const state = shallowRef(obj)
console.log(state);
function change1() {
// 直接将state.value重新赋值
state.value = {
a: 7,
first: {
b: 8,
second: {
c: 9
}
}
}
}
function change2() {
state.value.first.b = 8
state.value.first.second.c = 9
console.log(state);
}
return {state, change1, change2}
}
}
</script>
Первый взгляд наshallowRefКакая структура после упаковки
Тогда давайте посмотрим, что произойдет, если вы измените его значение
Сначала мы нажали вторую кнопку и обнаружили, что данные действительно изменились, но представление не обновилось соответствующим образом;
Итак, я нажал первую кнопку, примерно в целом.valueПереназначение, вид обновляется сразу
Глядя на это так, это слишком хлопотно. Если вы измените данные, вам придется переназначить их. Не волнуйтесь. В настоящее время мы можем использовать другой API, называемыйtriggerRef, вызывая его для немедленного обновления представления, которое получает параметрstate, который необходимо обновитьrefобъект
давайте использовать это
<template>
<p>{{ state.a }}</p>
<p>{{ state.first.b }}</p>
<p>{{ state.first.second.c }}</p>
<button @click="change">改变</button>
</template>
<script>
import {shallowRef, triggerRef} from 'vue'
export default {
setup() {
const obj = {
a: 1,
first: {
b: 2,
second: {
c: 3
}
}
}
const state = shallowRef(obj)
console.log(state);
function change() {
state.value.first.b = 8
state.value.first.second.c = 9
// 修改值后立即驱动视图更新
triggerRef(state)
console.log(state);
}
return {state, change}
}
}
</script>
Давайте посмотрим на конкретный процесс
Как видите, мы не дали
.valueПереназначение, сразу после изменения значения, вызовtriggerRefобновить представление
(9) в сырой
toRawметод используется для полученияrefилиreactiveнеобработанные данные объекта
Первый взгляд на кусок кода
<template>
<p>{{ state.name }}</p>
<p>{{ state.age }}</p>
<button @click="change">改变</button>
</template>
<script>
import {reactive} from 'vue'
export default {
setup() {
const obj = {
name: '前端印象',
age: 22
}
const state = reactive(obj)
function change() {
state.age = 90
console.log(obj); // 打印原始数据obj
console.log(state); // 打印 reactive对象
}
return {state, change}
}
}
</script>
Давайте посмотрим на конкретный процесс
мы изменились
reactiveДанные в объекте, затем увидеть исходные данныеobjи былreactiveЗначение обернутого объекта изменилось, из чего мы можем видеть, что они являются ссылочными отношениями.
Затем мы подумали в это время, если мы напрямую изменим исходные данныеobjзначение, что происходит? ответ:reactiveЗначение также изменится, но представление не будет обновляться
Можно видеть, что когда мы хотим изменить данные, но не хотим обновлять представление, мы можем напрямую изменить значение исходных данных, поэтому нам нужно сначала получить исходные данные, мы можем использовать Vue3 при условииtoRawметод
toRawпринимает один параметр, т.е.refобъект илиreactiveобъект
<script>
import {reactive, toRaw} from 'vue'
export default {
setup() {
const obj = {
name: '前端印象',
age: 22
}
const state = reactive(obj)
const raw = toRaw(state)
console.log(obj === raw) // true
}
}
</script>
Приведенный выше код доказывает, чтоtoRawметод изreactiveИсходные данные получаются из объекта, поэтому мы можем легко оптимизировать производительность, изменив значение исходных данных без обновления представления.
Уведомление:Чтобы добавить, когда
toRawПараметры, полученные методомrefобъект, вам нужно добавить.valueчтобы получить исходный объект данных
(10) отметкаRaw
markRawметод, чтобы пометить необработанные данные как не отвечающие, т.е. используяrefилиreactiveЗавершите его, все еще не в состоянии реализовать ответ данных, он получает один параметр, исходные данные и возвращает отмеченные данные.
Давайте посмотрим на код
<template>
<p>{{ state.name }}</p>
<p>{{ state.age }}</p>
<button @click="change">改变</button>
</template>
<script>
import {reactive, markRaw} from 'vue'
export default {
setup() {
const obj = {
name: '前端印象',
age: 22
}
// 通过markRaw标记原始数据obj, 使其数据更新不再被追踪
const raw = markRaw(obj)
// 试图用reactive包装raw, 使其变成响应式数据
const state = reactive(raw)
function change() {
state.age = 90
console.log(state);
}
return {state, change}
}
}
</script>
Давайте посмотрим наmarkRawМожно ли еще использовать данные, обработанные методомreactiveОбернуты как ответные данные
Как видно из рисунка, даже если мы изменим значение, представление не будет обновлено, то есть реагирование на данные не реализовано
(11) предоставлять && вводить
с Vue2provideиinjectЭффект тот же, за исключением того, что в Vue3 его нужно вручную изменить сvueимпортировать в
Вот краткое описание роли этих двух методов:
-
provide: передача данных дочерним компонентам и компонентам-потомкам. Получает два параметра, первый параметр
key, имя данных; второй параметрvalue, значение данных -
inject: получение данных, переданных от родительского компонента или компонента-предка. получить параметр
key, то есть имя данных, переданное родительским или предковым компонентом
Предположим, что это имеет три компонента, а именноA.vue,B.vue,C.vue,вB.vueдаA.vueподкомпонент ,C.vueдаB.vueподкомпонент
// A.vue
<script>
import {provide} from 'vue'
export default {
setup() {
const obj= {
name: '前端印象',
age: 22
}
// 向子组件以及子孙组件传递名为info的数据
provide('info', obj)
}
}
</script>
// B.vue
<script>
import {inject} from 'vue'
export default {
setup() {
// 接收A.vue传递过来的数据
inject('info') // {name: '前端印象', age: 22}
}
}
</script>
// C.vue
<script>
import {inject} from 'vue'
export default {
setup() {
// 接收A.vue传递过来的数据
inject('info') // {name: '前端印象', age: 22}
}
}
</script>
(12) смотреть && смотретьЭффект
watchиwatchEffectВсе они используются для отслеживания изменения данных для выполнения определенной операции, но существуют различия в использовании.
watch:watch( источник, cb, [параметры] )
Описание параметра:
- источник: может быть выражением или функцией, используемой для указания зависимого объекта для мониторинга.
- cb: функция обратного вызова, выполняемая после изменения зависимого объекта.
- опции: могут быть параметризованы, свойства, которые можно настроить, являются немедленными (немедленная активация функции обратного вызова), глубокими (глубокий мониторинг)
при мониторингеrefКогда тип:
<script>
import {ref, watch} from 'vue'
export default {
setup() {
const state = ref(0)
watch(state, (newValue, oldValue) => {
console.log(`原值为${oldValue}`)
console.log(`新值为${newValue}`)
/* 1秒后打印结果：
原值为0
新值为1
*/
})
// 1秒后将state值+1
setTimeout(() => {
state.value ++
}, 1000)
}
}
</script>
при мониторингеreactiveКогда тип:
<script>
import {reactive, watch} from 'vue'
export default {
setup() {
const state = reactive({count: 0})
watch(() => state.count, (newValue, oldValue) => {
console.log(`原值为${oldValue}`)
console.log(`新值为${newValue}`)
/* 1秒后打印结果：
原值为0
新值为1
*/
})
// 1秒后将state.count的值+1
setTimeout(() => {
state.count ++
}, 1000)
}
}
</script>
При прослушивании нескольких значений одновременно:
<script>
import {reactive, watch} from 'vue'
export default {
setup() {
const state = reactive({ count: 0, name: 'zs' })
watch(
[() => state.count, () => state.name],
([newCount, newName], [oldvCount, oldvName]) => {
console.log(oldvCount) // 旧的 count 值
console.log(newCount) // 新的 count 值
console.log(oldName) // 旧的 name 值
console.log(newvName) // 新的 name 值
}
)
setTimeout(() => {
state.count ++
state.name = 'ls'
}, 1000)
}
}
</script>
так какwatchВ качестве первого параметра метода мы указали объект для прослушивания, поэтому при инициализации компонента callback-функция во втором параметре не будет выполняться, если мы хотим, чтобы она была инициализирована, то она будет выполнена первой. набор объектовimmediate: true
watchМетод по умолчанию заключается в постепенном отслеживании данных, которые мы указываем. Например, если отслеживаемые данные вложены в несколько слоев, глубокие изменения данных не вызовут обратный вызов мониторинга. Если мы хотим, чтобы он также отслеживал глубокие данные, мы можем сделать это в третьем наборе в объекте параметраdeep: true
Пополнить:Метод watch вернет метод остановки. Если вы хотите прекратить прослушивание, вы можете напрямую выполнить функцию остановки.
Давайте поговорим об этом позжеwatchEffect, что то же самое, чтоwatchОсновные отличия заключаются в следующем:
- Нет необходимости вручную передавать зависимости
- Функция обратного вызова выполняется каждый раз при ее инициализации для автоматического получения зависимостей.
- Исходное значение не может быть получено, может быть получено только измененное значение
Давайте посмотрим, как используется этот метод:
<script>
import {reactive, watchEffect} from 'vue'
export default {
setup() {
const state = reactive({ count: 0, name: 'zs' })
watchEffect(() => {
console.log(state.count)
console.log(state.name)
/* 初始化时打印：
0
zs
1秒后打印：
1
ls
*/
})
setTimeout(() => {
state.count ++
state.name = 'ls'
}, 1000)
}
}
</script>
Как видно из приведенного выше кода, у нас нетwatchМетод такой же, как и при первой передаче зависимости, но напрямую указывает функцию обратного вызова.
Когда компонент инициализируется, функция обратного вызова выполняется один раз, и данные для обнаружения получаются автоматически.state.countиstate.name
В соответствии с приведенными выше характеристиками мы можем выбрать, какой слушатель использовать.
(13) получить текущий экземпляр
Все мы знаем, что в любом компоненте Vue2, если вы хотите получить экземпляр текущего компонента, вы можете передатьthisполучить, а в Vue3 у нас много кода вsetupфункция, и в этой функцииthisуказывает наundefined, то как получить экземпляр текущего компонента?
В этом случае можно использовать другой метод, а именноgetCurrentInstance
<template>
<p>{{ num }}</p>
</template>
<script>
import {ref, getCurrentInstance} from 'vue'
export default {
setup() {
const num = ref(3)
const instance = getCurrentInstance()
console.log(instance)
return {num}
}
}
</script>
Посмотрим на результат печати
так как
instanceКонтента слишком много, поэтому полностью я его не вырезал, но основное содержание находится на картинке, сосредоточимся на нем.ctxиproxy, потому что это то, что нам нужноthisСодержание
можно увидеть
ctxиproxyСодержание очень похоже, но последнее обернуто слоем по отношению к первому.proxy, можно объяснить, чтоproxyотзывчивый
(14) использоватьМагазин
Используя Vuex в Vue2, мы все проходимthis.$storeПриходите и получите экземпляр Vuex, но в предыдущей части говорилось, что оригинальный Vue2thisСпособ приобретения другой, и мы в Vue3getCurrentInstance().ctxтакже не нашел в$storeЭто свойство, то как получить экземпляр Vuex? Это черезvuexодин из способов вuseStore
// store 文件夹下的 index.js
import Vuex from 'vuex'
const store = Vuex.createStore({
state: {
name: '前端印象',
age: 22
},
mutations: {
……
},
……
})
// example.vue
<script>
// 从 vuex 中导入 useStore 方法
import {useStore} from 'vuex'
export default {
setup() {
// 获取 vuex 实例
const store = useStore()
console.log(store)
}
}
</script>
Посмотрим на результат печати
Затем вы можете использовать его как обычно, как и раньше
vuexохватывать
(15) Получить элемент метки
Наконец, добавьте еще одинrefДругая функция, то есть вы можете получить элемент или компонент метки
В Vue2 мы получаем элементы, давая имrefсвойства, затем передатьthis.$refs.xxдля доступа, но это больше не применимо в Vue3
Далее давайте посмотрим, как получить элементы в Vue3.
<template>
<div>
<div ref="el">div元素</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
setup() {
// 创建一个DOM引用，名称必须与元素的ref属性名相同
const el = ref(null)
// 在挂载后才能通过 el 获取到目标元素
onMounted(() => {
el.value.innerHTML = '内容被修改'
})
// 把创建的引用 return 出去
return {el}
}
}
</script>
Операция получения элемента делится на следующие этапы:
- Сначала укажите целевой элемент
refсвойство устанавливает значение, скажемel - затем в
setupвызов функцииrefфункция, значениеnull, и присвоить его переменнойel, здесь следует отметить, что имя переменной должно совпадать с тем, которое мы задали для элементаrefто же имя свойства - поместите ссылку на переменную элемента
elвернуться
Пополнить: Доступ к переменной задания элемента можно получить только после того, как компонент смонтирован, поэтому операции над элементом до монтажа недействительны.
Конечно, если мы сошлемся на компонентный элемент, то получим объект-экземпляр компонента, поэтому я не буду здесь слишком много демонстрировать.
3. Заключение
Эта статья также является изучением и пониманием автором Vue3. Поскольку я также просматривал множество документов в предыдущем процессе обучения и постоянно тестировал и исследовал, а также мой опыт в проекте Vue3, у меня есть более глубокое понимание Vue 3. В то же время я состою в различных сообществах или в нем. В социальной группе обнаружено, что многие мелкие партнеры не знакомы с API Vue3 или даже не знают, что эти API существуют, поэтому я написал эту сводную статью, чтобы поделиться с вами тем, что я знаю и понимаю.
Добро пожаловать в публичный аккаунт:внешнее впечатление, делиться и обмениваться передовыми знаниями