Dans vue3.2, il suffit d'ajouter setup dans la balise script. C'est possible. Les composants doivent seulement être introduits sans inscription, les attributs et les méthodes peuvent être utilisés dans le modèle sans retour, et il n'est pas nécessaire d'écrire des fonctions de configuration ou d'exporter par défaut. Même des instructions personnalisées peuvent être automatiquement obtenues dans notre modèle. .
1. Syntaxe du modèle
1. Utiliser des expressions JavaScript
Nous lions simplement quelques noms de propriété simples dans le modèle. Mais Vue prend en charge les expressions JavaScript complètes dans toutes les liaisons de données :
{
{ number + 1 }}
{
{ ok ? 'YES' : 'NO' }}
{
{ message.split('').reverse().join('') }}
<div :id="`list-${id}`"></div>2. Appelez la fonction
Une méthode exposée par un composant peut être utilisée dans une expression de liaison :
<span :title="toTitleDate(date)">
{
{ formatDate(date) }}
</span>
3. ref Obtenir des éléments
<template>
<div id="haha" ref="haha"></div>
</template>il faut ref préciser le type HTMLElement
setup() {
let haha = ref<HTMLElement|null>(null)
console.log(haha)
return {
haha,
}
},haha.style.fontSize = '20px'4.reactive
{
{obj.name}} Vous pouvez l'utiliser directement dans le modèle
Modifier modification directe obj[name] = ‘xxx’
La différence entre ref et réactif :
ref : Il est utilisé pour lier les données réactives aux types de données de base. Lors de l'accès, il doit passer la forme de .value , et tamplate sera automatiquement analysé, et .value n'est pas requis
réactif : utilisé pour lier des données réactives à des types de données complexes, il suffit d'y accéder directement
<template>
<div>
<p>{
{title}}</p>
<h4>{
{userInfo}}</h4>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
type Person = {
name: string;
age: number;
gender: string;
};
const title = ref<string>("彼时彼刻，恰如此时此刻");
const userInfo = reactive<Person>({
name: '树哥',
age: 18
})
</script>5.toRefs
setup() {
const user = reactive({
name: '小浪',
age: 21,
})
let userObj = toRefs(user)
return {
...userObj,
}
}6. Quelle est la différence entre réf et réactif ?
En termes de fonction, ref et reactive peuvent réaliser des données réactives !
Au niveau grammatical, les deux diffèrent. Les données réactives définies par ref doivent être modifiées à la manière de [data].value ; les données définies dans reactive doivent être modifiées à la manière de [data].[property].
const actTitle: Ref<string> = ref('活动名称');
const actData = reactive({
list: [],
total: 0,
curentPage: 1,
pageSize: 10
});
actTitle.value = '活动名称2';
actData.total = 100;Mais au niveau applicatif, il existe encore des différences.Généralement : pour un même type de données commun, on utilise ref pour définir la réactivité. Dans la scène du formulaire, la scène décrivant l' objet clé:valeur d'un formulaire utilise réactif ; dans certains scénarios, un ensemble de données d'un certain module utilise généralement la méthode réactive pour définir les données.
Alors, les objets doivent-ils être définis à l'aide de réactif ? En fait, ce n'est pas le cas, cela peut être fait, selon vos propres scénarios d'entreprise, des problèmes spécifiques et une analyse spécifique ! ref met l'accent sur le changement d'une valeur de données et reactive met l'accent sur le changement d'un certain attribut de l'objet défini.
7. Fonction périodique onMounted
import { defineComponent, ref, onMounted } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
onMounted(() => {
// 处理业务，一般进行数据请求
})
return {
counter
}
}
})8. utilisation en magasin
importer { useStore } depuis "vuex" ;
const store = useStore();
const storeData = computed (() => store); // Coopérez avec computed pour obtenir la valeur de store.
import { useStore } from "vuex";
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
const store = useStore();
const storeData = computed(() => store); // 配合computed，获取store的值。
return {
counter,
storeData
}
}
})
9. L'utilisation du routeur
import { useRouter } de "vue-router" ;
const routeur = useRouter();
const onClick = () => { router.push ({ nom : "AddGift" }); }
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { defineComponent, ref, computed } from 'vue';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
const router = useRouter();
const onClick = () => {
router.push({ name: "AddGift" });
}
return {
counter,
onClick
}
}
})
10. Séparation des préoccupations
La séparation des préoccupations doit être divisée en deux sens : le premier sens est que la configuration de Vue3 elle-même rassemble les données associées et la logique de traitement. Il s'agit d'une sorte d'agrégation de préoccupations, ce qui est plus pratique pour nous de regarder le code métier.
La deuxième couche signifie que lorsque la configuration devient plus grande, nous pouvons extraire une activité connexe au sein de la configuration pour obtenir une séparation des préoccupations au niveau de la deuxième couche.
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { defineComponent, ref, computed } from 'vue';
import useMerchantList from './merchant.js';
export default defineComponent({
name: 'Gift',
setup() {
const counter = ref(0);
const router = useRouter();
const onClick = () => {
router.push({ name: "AddGift" });
}
// 在该示例中，我们把获取商家列表的相关业务分离出去。也就是下面的merchant.ts
const {merchantList} = useMerchantList();
return {
counter,
onClick,
merchantList
}
}
})
marchand.ts
import { getMerchantlist } from "@/api/rights/gift";
import { ref, onMounted } from "vue";
export default function useMerchantList(): Record<string, any> {
const merchantList = ref([]);
const fetchMerchantList = async () => {
let res = await getMerchantlist({});
merchantList.value = res.data.child;
};
onMounted(fetchMerchantList);
return {
merchantList
};
}
11. interface
En utilisant TS pour le développement commercial, une idée centrale est de se concentrer d'abord sur la structure des données, puis de développer des pages basées sur la structure des données. Le modèle de développement frontal précédent consistait à écrire d'abord la page, puis à se concentrer sur les données.
Par exemple, pour écrire une page de liste de cadeaux, nous pouvons être amenés à définir de telles interfaces. Dans l'ensemble, nous devons faire attention à : l'interface des données de la page, le type de données renvoyé par l'interface, le type de paramètre d'entrée de l'interface, etc.
// 礼品创建、编辑、列表中的每一项，都会是这个数据类型。
interface IGiftItem {
id: string | number;
name: string;
desc: string;
[key: string]: any;
}
// 全局相应的类型定义
// 而且一般来说，我们不确认，接口返回的类型到底是什么（可能是null、可能是对象、也可能是数组），所以使用范型来定义interface
interface IRes<T> {
code: number;
msg: string;
data: T
}
// 接口返回数据类型定义
interface IGiftInfo {
list: Array<IGiftItem>;
pageNum: number;
pageSize: number;
total: number;
}
Dans une demande d'interface commune, nous utilisons généralement TS pour définir une demande de données, le type req de la demande de données et le type res de la demande de données.
export const getGiftlist = (
params: Record<string, any>
): Promise<IRes<IGiftInfo>> => {
return Http.get("/apis/gift/list", params);
};
12. Prend en charge plusieurs modèles en V
//父组件
<template>
<child v-model="name" v-model:email="email" />
<p>姓名：{
{ name }}</p>
<p>邮箱：{
{ email }}</p>
</template>
<script lang="ts" setup>
import child from './child.vue'
import { ref } from 'vue'
const name = ref<string>('张三')
const email = ref<string>('[email protected]')
</script>// 子组件
<template>
<button @click="updateName">更新name</button>
<button @click="updateEmail">更新email</button>
</template>
<script lang="ts" setup>
// 定义emit
const emits = defineEmits<{
(e: 'update:modelValue', value: string): void
(e: 'update:email', value: string): void
}>()
const updateName = () => {
emits('update:modelValue', '李四')
}
const updateEmail = () => {
emits('update:email', '[email protected]')
}
</script>Si v-modelaucun paramètre n'est utilisé, sa valeur par défaut modelValueest la première ci-dessus v-model. Notez qu'il n'est plus utilisé comme Vue2 pour le moment $emit('input'), mais est utilisé de manière uniforme update:xxx.
13. regarder
regarder(données,()=>{},{})
Paramètre un, les données surveillées
Paramètre deux, la fonction de rappel déclenchée lorsque les données changent (newVal, oldVal)
Le paramètre trois, l'élément de configuration des options, est un objet
-
1. Écouter une donnée de réponse définie par ref
<script setup lang="ts">
import { ref, watch } from "vue";
const str = ref('彼时彼刻')
//3s后改变str的值
setTimeout(() => { str.value = '恰如此时此刻' }, 3000)
watch(str, (newV, oldV) => {
console.log(newV, oldV) //恰如此时此刻 彼时彼刻
})
</script>-
2. Écoutez plusieurs références
A ce moment, la méthode d'écriture prend la forme d' un tableau
<script setup lang="ts">
import { ref, watch } from "vue";
let name = ref('树哥')
let age = ref(18)
//3s后改变值
setTimeout(() => {
name.value = '我叫树哥'
age.value = 19
}, 3000)
watch([name, age], (newV, oldV) => {
console.log(newV, oldV) // ['我叫树哥', 19] ['树哥', 18]
})
</script>-
3. Écoutez l'objet responsive défini par Reactive
<script setup lang="ts">
import { reactive, watch } from "vue";
let info = reactive({
name: '树哥',
age: 18
})
//3s后改变值
setTimeout(() => {
info.age = 19
}, 3000)
watch(info, (newV, oldV) => {
console.log(newV, oldV)
})
</script>-
4. Écoutez réactif pour définir un seul attribut d'un objet réactif
<script setup lang="ts"> import { reactive, watch } from "vue"; let info = reactive({ name: '树哥', age: 18 }) //3s后改变值 setTimeout(() => { info.age = 19 }, 3000) watch(()=>info.age, (newV, oldV) => { console.log(newV, oldV) // 19 18 } </script>
-
arrête d'écouter
Lorsque watchEffect est appelé dans la fonction setup() d'un composant ou un hook de cycle de vie, l'écouteur est lié au cycle de vie du composant et s'arrête automatiquement lorsque le composant se démonte.
Mais nous avons créé un écouteur de manière asynchrone. À ce stade, l'écouteur n'est pas lié au composant actuel, donc même si le composant est détruit, l'écouteur existe toujours.
À ce moment, nous pouvons appeler explicitement pour arrêter d'écouter
<script setup lang="ts">
import { watchEffect } from 'vue'
// 它会自动停止
watchEffect(() => {})
// ...这个则不会！
setTimeout(() => {
watchEffect(() => {})
}, 100)
const stop = watchEffect(() => {
/* ... */
})
// 显式调用
stop()
</script>(idem ci-dessous)
Surveillance de différents types de données
Surveillance des types de données de base :
nom constant = ref<string>('Zhang San')
watch (nom, ( newValue, oldValue ) => { console.log('watch===', newValue, oldValue) })
Surveillance de types de données complexes :
interface UserInfo { name: string age: number } const userInfo = reactive< UserInfo >({ name: 'Zhang San', age: 10 }) // surveiller l'intégralité de l'objet watch( userInfo , (newValue, oldValue) => { console .log('watch userInfo', newValue, oldValue) }) // surveiller une propriété watch( () => userInfo.name , (newValue, oldValue) => { console.log('watch name', newValue, oldValue) })
Prise en charge de l'écoute de plusieurs sources
const name = ref<string>('Zhang San')
const userInfo = reactive({ age: 18 }) // Surveiller l'attribut age de name et userInfo en même temps watch([name, () => userInfo.age ] , ([ nouveauNom, nouvelAge], [ancienNom, ancienAge]) => { // })
14. watchet watchEffectdifférence :
1. Watch est une exécution paresseuse, c'est-à-dire qu'il ne sera exécuté que lorsque la valeur surveillée change, mais watchEffect est différent et watchEffect sera exécuté à chaque fois que le code est chargé (ignorez la configuration du troisième paramètre de watch, si vous modifier l'élément de configuration, vous pouvez également l'implémenter immédiatement)
2. La montre doit passer l'objet surveillé, watchEffect n'a pas besoin
3. Watch ne peut surveiller que les données réactives : attributs définis par ref et objets définis par réactif. Si vous surveillez directement les attributs dans l'objet défini par réactif, cela n'est pas autorisé, sauf si vous utilisez une fonction pour le convertir.
4. WatchEffect ne fonctionne pas s'il surveille l'objet défini par réactif, il ne peut surveiller que les propriétés de l'objet.
15. calculé
<template>
<div>
<p>{
{title}}</p>
<h4>{
{userInfo}}</h4>
<h1>{
{add}}</h1>
</div>
</template>
<script setup lang="ts">
import { ref, reactive,computed } from "vue";
const count = ref(0)
// 推导得到的类型：ComputedRef<number>
const add = computed(() => count.value +1)
</script>