Зачем изучать vue3?
Vue2.0 теперь также является относительно стабильной версией, а сообщество и окружающие области относительно полны.Если это не является ненужным, нам не нужно спешить с обновлением до vue3.0 напрямую;
Тогда почему мы все еще должны учиться, главным образом, понимать преимущества и особенности VUE3.0 по сравнению с 2.0, так что после улучшения общества и окружающих версию 3.0 мы напрямую обновляем до 3,0, и улучшить Технология и увеличение зарплаты, в конце концов, когда 3.0 впервые вышло, он привлек внимание различных бигмиков в отрасли. Теперь самый популярный передовой круг - VUE3.0, так что ли это узнать новые знания или учиться Отличное программирование идей, или для того, чтобы увеличить зарплату, нам всем нужно посмотреть и учиться.
Как перейти с версии 2.0 на версию 3.0?
Прежде всего, если мы хотим испытать версию 3.0, нам все равно придется сначала выполнить обновление.Вот несколько способов обновления до версии 3.0;
1. Первый способ - использовать официальные леса vue-cli для обновления, если есть студенты, которые не понимают, вы можете перейти на официальный сайт, чтобы проверитьvue-cli
// Сначала обновите скаффолдинг до последней версии, если он не был установлен ранее, прямая глобальная установка будет последней версии 4.0
npm install -g @vue/cli
or
yarn global add @vue/cli
// Если вы уже установили его, вы можете обновить версию
npm update -g @vue/cli
or
yarn global upgrade --latest @vue/cli
ps: после обновления версии до последней можно сразу начать установку.Сначала создайте проект vue3.0
vue create vue3 // По умолчанию для создания может быть выбрана версия 3.0, а после создания можно запустить опыт
cd vue3 // после ввода
yarn serve
пс: Если вы забыли выбрать 3.0? Ничего страшного, можно и в проект зайти для установки
// Если созданный вами проект имеет версию 2.0, выбранную по умолчанию, просто нажмите операцию ниже
yarn add vue-next // add vue-next автоматически обновится до версии vue3
2. Второй способ — использовать установку vite, которая тоже является великим шедевром.адрес гитхаба
// Сначала нам нужно клонировать код vite в локальный
git clone GitHub.com/Вите есть/Вите…
cd vite // вводим файл
пряжа // начинаем установку зависимостей
сборка пряжи // упаковка
yarn link
ps: начните создавать свой проект
yarn create vite-app project-name
cd project-name
yarn
yarn dev
ps: После выполнения вышеуказанных операций можно приступать к приятному опыту vue3.0
Краткое введение и использование API композиции vue3Официальное руководство по использованию API композиции
1. Во-первых, давайте познакомимся с API композиции
Что такое составной API? Буквальная интерпретация — это комбинированный API, который состоит в том, чтобы разделить многие исходные низкоуровневые методы и сделать их доступными для всех;
Например, оригинальный метод может быть записан только в методах, но в vue3 есть определенные изменения, и его следует использовать в настройке;
Давайте рассмотрим несколько API, которые я считаю более важными. Давайте кратко представим, как их использовать?
1.createApp // Как следует из названия, создайте экземпляр APP, но как его использовать?
// 先导入createApp模块
import { createApp } from 'vue';
import App from './App.vue';
// 使用createApp方法将我们的入口文件放进去，最后挂载
createApp(App).mount('#app');
2.onMounted // Отличается от предыдущего способа написания, но есть еще один на
// 先导入onMounted模块
import { onMounted, defineComponent } from 'vue';
export default defineComponent({
setup () {
// 使用的时候需要放在setup里边
onMounted(() => {
console.log('组件挂在结束开始打印。。。')
})
}
})
3. свойства вычисляемого компьютера
import { computed, ref } from 'vue';
// 基本操作
const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // 错误！
import { computed, ref } from 'vue';
// 可以修改值
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
4. смотреть слушатель
import { reactive, watch } from 'vue';
// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
}
)
// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
/* ... */
})
5. Обновленная версия прослушивателя watchEffect, который немедленно выполняет переданную функцию, оперативно отслеживает ее зависимости и повторно запускает функцию при изменении ее зависимостей.
const count = ref(0)
watchEffect(() => console.log(count.value))
// -> 打印出 0
setTimeout(() => {
count.value++
// -> 打印出 1
}, 100)
Остановить прослушивание Когда watchEffect вызывается в функции setup() компонента или обработчике жизненного цикла, слушатель будет связан с жизненным циклом компонента и автоматически остановится, когда компонент будет выгружен.
const stop = watchEffect(() => {
/* ... */
})
// 之后
stop()
6.reactive Получает обычный объект и возвращает реактивный прокси для обычного объекта. Это эквивалентно Vue.observable() в 2.x. Обратите внимание, что в исходном коде четко указано, что объект должен быть передан, иначе будет выдано исключение. Если вы хотите использовать отзывчивость для одной переменной, вы можете использовать ref, как описано ниже
const obj = reactive({ count: 0 }) // 返回的就是响应式对象
// 使用
obj.count ++
console.log(obj.count) // 输出的是1
Если вы хотите использовать эту переменную в компоненте, вам нужно вернуть ее в настройках
первая форма возврата
<template>
<!-- 这种形式在组件内使用的时候需要obj.count -->
<p>{{ obj.count }}</p>
</template>
import { reactive } from 'vue';
export default defineComponent({
setup () {
const obj = reactive({ count: 0 })
return { obj } // 这种形式在组件内使用的时候需要obj.count
}
})
Вторая форма возврата
<template>
<!-- 这种形式在组件内使用的时候跟之前一样 -->
<p>{{ count }}</p>
</template>
import { reactive, toRefs } from 'vue';
export default defineComponent({
setup () {
const obj = reactive({ count: 0 })
return { ...toRefs(obj) }
}
})
7.toRefs преобразует отзывчивый объект в обычный объект, каждое свойство обычного объекта является ref , что соответствует свойству отзывчивого объекта один к одному.
Почему приведенный выше пример завернут в toRefs, ведь он такой, реактивный, по сути, прокси используется для проксирования всего объекта, и в ответ возвращается весь объект, но что делать, если в объекте много уровней, Если в объекте еще есть объект, то объект внутри не отзывчивый, поэтому его оборачивают toRefs, что эквивалентно атрибутам во всем объекте.Внутри исходного кода сделана рекурсия, и все атрибуты были оценены, если это ссылочный тип, он снова будет использовать прокси для прокси, поэтому свойства всего объекта реагируют, что является следующим способом записи;
import { reactive, toRefs } from 'vue';
export default defineComponent({
setup () {
const obj = reactive({ count: 0 })
return { ...toRefs(obj) }
}
})
8.ref принимает значение параметра и возвращает реактивный и изменяемый объект ref. Объект ref имеет единственное свойство .value, которое указывает на внутреннее значение.
const count = ref(0)
console.log(count.value) // 0
count.value++
console.log(count.value) // 1
9.toRef можно использовать для создания ссылки на свойства реактивного объекта. Этот ref может быть передан и остается отзывчивым.
const state = reactive({
foo: 1,
bar: 2,
})
const fooRef = toRef(state, 'foo')
fooRef.value++
console.log(state.foo) // 2
state.foo++
console.log(fooRef.value) // 3
10.nextTick имеет ту же функцию, что и предыдущая, но способ написания немного отличается, если вы хотите узнать больше об этом, вы можете прочитать это здесьмеханизм асинхронного обновления vue nextTick
import { nextTick } from 'vue';
export default defineComponent({
setup () {
nextTick(() => {
console.log('--- DOM更新了 ---')
})
}
})
Здесь сначала будет представлено введение API композиции Заинтересованные студенты могут прочитать его здесь:
composition API
Умственная нагрузка API композиции Vue
ps: Заинтересованные студенты, я хочу использовать его, но я не знаю, как его использовать Я написал простую демонстрацию, чтобы помочь вам ознакомиться с ним.vue3 demo