Configuration du sucre de syntaxe Vue3 (2)

Prenez l'habitude d'écrire ensemble ! C'est le 8ème jour de ma participation au "Nuggets Daily New Plan · April Update Challenge", cliquez pour voir les détails de l'événement .

Dans vue2, les deux API, watch et computed, nous sont très utiles, aujourd'hui je vais parler de ces deux API.

calculé

computed在vue3中以函数形式存在，传入一个对象，当里面的依赖被读取是，调用get函数，被修改时调用set函数
会返回一个ref对象
复制代码

Ecrire un cas classique

Il est nécessaire de vous donner un nom et un prénom. Nous devons afficher le nom. Certains étudiants peuvent utiliser directement l'épissage de chaînes, ce qui est également possible, mais nous allons utiliser l'attribut computed pour l'essayer maintenant.

définir et obtenir

Une fois que la variable dont dépend la fonction définie est modifiée, la fonction définie sera exécutée immédiatement

La variable dont dépend la fonction get, tant qu'elle est lue, la fonction get sera exécutée

Ces deux fonctions sont très simples et sont le principe de la réactivité dans vue2

Cas

Définir lastName, firstName, mettre à jour les fonctions de mise à jour, fullName est le nom

setup() {
  const firstName = ref("李")
  const lastName = ref("华")
  const update = ()=>{
    firstName.value = "孙"
  }
  let fullName = computed({
    get(){
      console.log("get"+'函数被调用');
      return firstName.value+lastName.value
    },
    set(value){
      console.log(“set函数被调用”);
    }
  })
  return {
    fullName,
    update
  }
}
复制代码

fullName est une propriété calculée. Lorsque la dépendance get est modifiée, la fonction get est exécutée immédiatement et de nouvelles données sont renvoyées. Elle ne sera appelée que lorsque le nom complet lui-même est modifié. La fonction set est différente.

Nous pouvons voir que lorsque nous ouvrons la page Web, la fonction get sera exécutée en premier, puis la fonction get sera exécutée à nouveau lorsque le premier nom sera modifié.

Fonction montre

Deux API, watchEffect et watch, sont fournies dans la configuration. Les deux peuvent être utilisées pour la surveillance. La différence sera résumée plus tard.

watchEffet

watchEffect自动收集依赖，初始化运行,返回值为stop一个函数，调用会停止监听
可以传入一个函数，第一次执行时自动收集获取依赖
复制代码

Cette fonction ne nous oblige pas à spécifier des dépendances, elle obtiendra les dépendances correspondantes lors de sa première exécution

setup() {
  const name = ref("scc")
  const age = ref(18)
  const update = ()=>{
    age.value++

  }
  watchEffect(()=>{
    console.log(age.value);
  })
  return {
    name,
    age,
    update
  }
}
复制代码

Définissez un nom, une variable d'âge, une méthode de mise à jour pour mettre à jour l'âge, watchEffect écoute la valeur de l'âge

Nous pouvons jeter un œil aux résultats en cours d'exécution

On peut voir que lorsque le navigateur est actualisé, le programme s'exécute automatiquement une fois et nous pouvons surveiller le changement de la valeur d'âge

propriété affleurante

Parlons de la façon d'obtenir l'élément dom dans la configuration. Dans vue2, nous obtenons l'élément dom via $refs. Dans vue3, nous pouvons donner à l'élément dom un attribut ref, définir cet attribut dans la configuration et le transmettre, nous pouvons passer cet attribut obtenir l'élément dom

setup() {
      const root = ref(null)
      const name = ref("scc")
      watchEffect(()=>{
        console.log(root.value);
      })
      return {
        root
      }
复制代码

Nous définissons root et le transmettons, ajoutons l'attribut ref à l'élément dom et regardons la sortie du navigateur

À ce stade, nous pouvons obtenir l'élément dom, mais il est exécuté deux fois, et tout le monde l'a découvert, la première fois qu'il affiche null, et la deuxième fois c'est l'élément dom

Pourquoi est-ce? Parce que notre fonction watchEffect est initialisée une fois lorsque le dom n'est pas actualisé, et exécutée à nouveau lorsque le dom est monté

Comment éviter cela, peut-on le faire une seule fois

Oui, nous pouvons utiliser l'objet flush

Un objet flush peut être configuré derrière watchEffect. La valeur par défaut est pre, qui est initialisé et exécuté. Il peut être modifié pour que la post-initialisation ne s'exécute pas.

essayons

setup() {
  const root = ref(null)
  watchEffect(()=>{
    console.log(root.value);
  },{
    flush:"post"
  })
  return {
    root
  }
}
复制代码

Nous ajoutons un objet à watchEffect

À ce stade, watchEffect n'est exécuté qu'une seule fois

arrêt

La valeur de retour de watchEffect est une fonction qui peut être exécutée pour arrêter la surveillance

setup() {
  const name = ref("scc")
  const age = ref(18)
  const update = ()=>{
    age.value++
  }
  const stop = watchEffect(()=>{
    console.log(age.value);
    if(age.value>25){
      stop()
    }
  })
  return {
    name,
    age,
    update,
  }
}
复制代码

Nous écoutons l'attribut d'âge, et quand il est supérieur à 25, arrêtons d'écouter

Nous pouvons voir que lorsqu'il est supérieur à 25, la page est toujours mise à jour, mais les données ne sont plus sorties.

Regardez

Le premier paramètre de watch est la valeur à surveiller, qui peut être un objet ref, un objet réactif, une fonction de rappel, et le deuxième paramètre est une fonction de rappel. Lorsque la valeur surveillée change, la fonction de rappel sera appelée.

Écoutez les objets réactifs

setup() {
  const info = reactive({age:18})
  const update = ()=>{
    console.log(info.age);
    info.age++
  }
  watch(info,(newValue,oldValue)=>{
    console.log(newValue+"------------------"+oldValue);
  },{
    deep:true
  })
  return{
    info,
    update
  }
}
复制代码

Définir les informations, mettre à jour les informations de modification.age, regarder les informations sur le moniteur

Il est possible d'écouter les informations, mais l'ancienne valeur et la nouvelle valeur semblent être différentes de celles attendues

En effet, newValue et oldValue sont également des objets réactifs. Si vous souhaitez devenir une valeur, vous pouvez convertir l'objet réactif en objet () =>{return {...info}}

setup() {
  const info = reactive({age:18,name:"scc"})
  const update = ()=>{
    console.log(info.age);
    info.age++
  }
  watch(()=>({...info}),(newValue,oldValue)=>{
    console.log(newValue,oldValue);
  })
  return{
    info,
    update
  }
}
复制代码

Nous déconstruisons l'information et surveillons l'objet structuré

Comme vous pouvez le voir, tout va bien

surveiller l'objet de référence

setup() {
  const age = ref(18)
  const update = ()=>{
    console.log(age.value);
    age.value++
  }
  watch(age,(newValue,oldValue)=>{
    console.log(newValue,oldValue);
  })
  return{
    age,
    update
  }
}
复制代码

Créer l'âge de l'objet de référence, mettre à jour l'âge de la mise à jour, regarder l'âge du moniteur

Peut surveiller normalement, afficher le contenu

Surveiller plusieurs données

如果需要监听多个数据，可以传入一个数组
复制代码

Le troisième paramètre de watch, élément de configuration

deep深度侦听默认为true，结构出来对象没有侦听，需要开启
immediate最开始是否运行
复制代码

Finir

到此结束，明天接着更新
复制代码