Vue3-admin быстро приступит к работе с реальными проектами
1. В vue3 используются все функциональные методы записи, заменяющие метод записи исходного класса.
2. Удалены исходные функции жизненного цикла и объекты в vue2, такие как данные, вычисления, часы, метод и т. д., удалено это и удален фильтр api -> filter
3, исходный код vue3 написан во всех ts, ts кодирования для достижения лучшей поддержки
4. Vue3 полностью совместим с Vue2.В Vue3 вы по-прежнему можете писать код так же, как в Vue2, и два метода написания могут существовать одновременно.
5. Когда в компоненте одновременно есть два метода записи, когда метод, определенный в возвращаемом значении настройки, имеет то же имя, что и метод в методах, будет выдана ошибка. Когда определенные данные совпадают с полем данных, определенным данными, они будут перезаписаны полем, определенным данными.
6. Vue3 реализует прокси данных через прокси, который будет проксировать только первый уровень данных, избегая глубокой рекурсии данных в vue2 и улучшая производительность рендеринга компонентов.
Следующим образом:
// 在vue3中定义一个响应式数据
const state = reactive({data: {obj: {}}});
state.data.obj = xxx;
Возвращаемое состояние является прокси-объектом, который по умолчанию будет проксировать только данные. Итак, как vue3 реализует глубокий захват данных?Например, если мы хотим изменить obj, как мы можем отслеживать модификацию obj?
Когда мы хотим изменить obj глубокого объекта, будет вызван метод get из state.data.В методе get будет проксироваться state.data, а свойства в state.data будут захвачены.Метод get возвращает не state.data.Это объект, который был проксирован прокси, который ловко реализует глубокий захват данных.При использовании этого свойства должен быть вызван метод get родителя, а затем методы get и set свойства будут перехвачены.
Во-первых, функция настройки
Функция настройки — это вход и выход всех API в vue3.
В vue3 функция настройки используется для интеграции всех API.Функция настройки выполняется только один раз и выполняется перед функцией жизненного цикла, поэтому текущий экземпляр this нельзя получить в функции настройки, и ее нельзя использовать для вызова метод, определенный в методе записи vue2.
В vue3 данные удаляются, а возвращаемое значение setup используется для привязки значения к шаблону.
Если возвращаемый объект является константой, он не станет чувствительными данными.
this.$emit заменяется методом context.emit
// props - 组件接受到的属性， context - 上下文
setup(props, context){
return {
// 要绑定的数据和方法
}
}
2. Жизненный цикл
Функции жизненного цикла стали формой обратных вызовов, которые прописываются в функции настройки. Вы можете написать несколько одинаковых функций жизненного цикла одновременно и выполнять их в порядке регистрации.
setup() {
onMounted(() => {
console.log('组件挂载1');
});
onMounted(() => {
console.log('组件挂载2');
});
onUnmounted(() => {
console.log('组件卸载');
});
onUpdated(() => {
console.log('组件更新');
});
onBeforeUpdate(() => {
console.log('组件将要更新');
});
onActivated(() => {
console.log('keepAlive 组件 激活');
});
onDeactivated(() => {
console.log('keepAlive 组件 非激活');
});
return {};
},
3. ref — простые отзывчивые данные
1. ref может обернуть общее значение в отзывчивые данные, которые ограничены простыми значениями.Внутренне значение оборачивается в объект, а затем обрабатывается с помощью defineProperty Значение, завернутое в ref, при получении значения и установке значения необходимо использовать значение для установки значения.
2. Вы можете использовать ref, чтобы получить ссылку на компонент, вместо того, чтобы писать this.$refs
<template>
<div class="mine">
<input v-model="inputVal" />
<button @click="addTodo">添加</button>
<ul>
<li v-for="(item, i) in todoList" :key="i">
{{ item }}
</li>
</ul>
</div>
<div></div>
</template>
setup() {
const inputVal = ref('');
const todoList = ref<string[]>([]);
function addTodo() {
todoList.value.push(inputVal.value);
inputVal.value = '';
}
return {
addTodo,
inputVal,
todoList,
};
},
Четвертый, реактивный — привязка данных
Используйте реактивный для оперативной обработки сложных данных, и его возвращаемое значение является прокси-объектом, При возврате в функцию настройки можно использовать toRefs для деконструкции прокси-объекта, что удобно для использования в шаблоне
Создавайте адаптивные данные с помощью реактивных, используйте toRefs для деконструкции и используйте inputVal и todoList непосредственно в шаблоне.
Метод, привязанный к шаблону, также должен быть определен в функции настройки и возвращен до того, как его можно будет привязать к шаблону, например метод addTodo.
Шаблон Vue3: шаблон может иметь несколько горизонтальных тегов (только один вложенный тег может быть записан в шаблоне в vue2)
<template>
<div class="mine">
<input v-model="inputVal" />
<button @click="addTodo">添加</button>
<ul>
<li v-for="(item, i) in todoList" :key="i">
{{ item }}
</li>
</ul>
</div>
<div></div>
</template>
setup() {
const data = reactive({
inputVal: '',
todoList: [],
});
function addTodo() {
data.todoList.push(data.inputVal);
data.inputVal = '';
}
return {
...toRefs(data),
addTodo,
};
},
Пять, вычислено
Вычисляемые свойства стали записью функции, которая будет пересчитываться при изменении зависимого значения Значение, обернутое вычислением, должно использовать .value для получения значения, а .value не нужно использовать в шаблоне.
async setup() {
const data = reactive({
a: 10,
b: 20,
});
let sum = computed(() => data.a + data.b);
return { sum };
},
Шесть, смотри
Это стало способом написания функции, который аналогичен использованию в vue2.
// 侦听一个
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
}
)
// 直接侦听一个ref
const count = ref(0)
watch(count, (count, prevCount) => {
/* ... */
})
Семь, новый метод watchEffect
Отзывчивая функция отслеживания данных, отвечающая за ссылку, когда данные изменяются в ответ, повторно выполнит функцию.
const count = ref(0)
// 当count的值被修改时，会执行回调
watchEffect(() => console.log(count.value))
Восемь, vue-маршрутизатор
Используйте useRoute и useRouter при использовании маршрутов в компонентах
import {useRoute, useRouter} from 'vue-router'
const route = useRoute(); // 相当于 vue2 中的this.$route
const router = useRouter(); // 相当于 vue2 中的this.$router
route 用于获取当前路由数据
router 用于路由跳转
Девять, векс
Используйте useStore для получения объекта магазина При взятии значений из vuex обратите внимание на необходимость использования вычислений для переноса, чтобы состояние в vuex можно было модифицировать в ответ на страницу
import {useStore} from 'vuex'
setup(){
const store = useStore(); // 相当于 vue2中的 this.$store
store.dispatch(); // 通过store对象来dispatch 派发异步任务
store.commit(); // commit 修改store数据
let category = computed(() => store.state.home.currentCagegory
return { category }
}
10. Используйте jsx для определения компонентов vue
Vue3 поддерживает использование синтаксиса jsx для определения компонентов vue.
export const AppMenus = defineComponent({
setup() {
return () => {
return (
<div class="app-menus">
<h1>这是一个vue组件</h1>
</div>
);
};
},
});
11, модификация слота
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
Выход без имени будет иметь неявное имя «по умолчанию».
Предоставляя контент в именованные слоты, мы можем