Quels sont les points à noter dans la configuration de Vue3 et quels sont les attributs de surveillance de la montre ?

Tout d'abord, les instructions de configuration

1.1 Le temps d'exécution de la configuration

1. Le temps d'exécution de la configuration est antérieur à avantCréer l'exécution

  export default {
    name: "Demo",
    beforeCreate(){
      console.log('beforeCreate已执行');
    },
    setup() {
      console.log('setup已执行');
      let person = reactive({
        name: "小明",
        age: 20,
      });
      return {
        person,
      };
    },
  };

Paramètres 1.2.steup

paramètres de configuration

1.props : La valeur est un objet, Contient : des attributs passés de l'extérieur du composant, et reçus à l'intérieur du composant

2.context : objet de contexte

①attrs : la valeur est un objet, comprenant : des attributs passés de l'extérieur du composant, mais non déclarés. dans la configuration des accessoires, équivalent à this.$attrs

  export default {
    name: "Demo",
    props:['msg','age'],
    setup(props) {
      console.log(props);
      let person = reactive({
        name: "小明",
        age: 20,
      });   
      return {
        person,
      };
    },
  };

this.$attrs

<template v-slot:qwe>
<span>123</span>
</template>
<template v-slot:ewq>
<span>321</span>
</template>

②slots: 收到的插槽内容,相当于 this.$slots。

在App中定义插槽

 console.log(context.slots); // 得到插槽

在子组件中获取到插槽

<Demo @hi="Hello" msg="山鱼" age=10>
</Demo>

③emit: 分发自定义事件的函数,相当于 this.$emit

②slots : Le contenu du slot reçu est équivalent à this.$slots.

Définissez l'emplacement dans l'application

  setup() {
    function Hello(){
      console.log('你好！');
    }
    return {
      Hello
    }
  }

Obtenez l'emplacement dans le sous-composant

 function point(){
        context.emit('hi',666)
      }     
5TgxPT2v-1681788304084)]

```js
 function point(){
        context.emit('hi',666)
      }

③emit : Une fonction qui distribue des événements personnalisés, équivalente à this.$emit.

Écrivez un événement personnalisé dans l'application et transmettez-le au composant

import { reactive,computed} from "vue";
  export default {
    name: "Demo",
    setup() {
      let person = reactive({
        firstName: "小",
        lastName: "明",
      }); 
      // 计算属性的简写形式，不考虑修改，是只读的
      /*person.fullName= computed(()=>{
        return person.firstName+'-'+person.lastName
      }) */
      // 计算属性的完整形式（可以读改）
      person.fullName= computed({
        get(){
          return person.firstName +'-'+person.lastName
        },
        set(value){
          const arr = value.split('-')
          person.firstName = arr[0]
          person.lastName = arr[1]
        }
      })
      return {
        person,
      };
    },
  };

    watch(sum, (newvalue, oldvalue) => {
      console.log('当前值为'+newvalue, '以前值为'+oldvalue);
    });

Ensuite, accédez au sous-composant et utilisez context.comit pour obtenir l'événement personnalisé

        watch([sum,msg], (newvalue, oldvalue) => {
      console.log('当前值为'+newvalue, '以前值为'+oldvalue);
    });

Il est cohérent avec le fonction de configuration calculée dans Vue2

             watch(person,(newValue, oldValue) => {
                console.log('person变化了',newValue,oldValue)
             })

Deuxièmement, il existe deux types de montres pour les attributs de surveillance de la montre

, à savoir la surveillance des données d'attribut unique et la surveillance des données d'attributs multiples

Les trois paramètres de la montre sont l'objet surveillé, la fonction surveillée et la configuration de l'attribut surveillé.
Surveiller les données définies par ref①Surveiller l'attribut pour surveiller une valeur réactive de ref

            watch(()=>person.name,(newValue,oldValue)=>{
               console.log('person.name发生了变化',newValue,oldValue)
           })

②Surveiller plusieurs données réactives définies par ref

watch([()=>{person.age},()=>{person.name}],(newValue,oldValue)=>{
                console.log('person.name发生了变化',newValue,oldValue)
            })

Surveiller les données définies par reactive

①Surveiller réactif définition Modifications des données

Les données définies à l'aide de réactif ne peuvent pas obtenir correctement la nouvelle valeur à l'aide de watch🎜🎜🎜, et une surveillance approfondie sera forcée d'ouvrir🎜🎜

 watch(()=>person.job,(newValue,oldValue)=>{
                console.log('person.name发生了变化',newValue,oldValue)
            }, {deep: true})

🎜②Surveiller un certain attribut des données réactives définies par réactif🎜rrreee🎜③Surveillance de certains attributs de données réactives définies par réactif🎜rrreee🎜④Situation spéciale🎜🎜Remarque : Cette situation surveille un certain attribut dans l'objet défini par réactif, donc deep peut être activé🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!