Welche Punkte sind beim Vue3-Setup zu beachten und welche Überwachungsattribute gibt es?

Zuerst Setup-Anweisungen

1.1 Die Ausführungszeit des Setups

1. Die Ausführungszeit des Setups ist früher als zuvor. Ausführung erstellen

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

1.2.steup-Parameter

Parameter des Setups
1.props: Der Wert ist ein Objekt, enthält: Attribute, die von außerhalb der Komponente übergeben und innerhalb der Komponente empfangen werden.

2.context: Kontextobjekt
①attrs: Wert ist ein Objekt, einschließlich: Attribute, die von außerhalb der Komponente übergeben, aber nicht deklariert werden in der Requisitenkonfiguration, äquivalent zu this.$attrsthis.$attrs

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

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

在App中定义插槽

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

在子组件中获取到插槽

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

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

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

②slots: Der empfangene Slot-Inhalt entspricht this.$slots.

Definieren Sie den Slot in der App

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

Holen Sie sich den Slot in der Unterkomponente

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

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

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);
    });

Gehen Sie dann zur Unterkomponente und verwenden Sie context.comit, um das benutzerdefinierte Ereignis abzurufen Berechnete Konfigurationsfunktion in Vue2 die Konfiguration des überwachten Attributs.

Überwachen Sie die durch ref definierten Daten.

①Überwachen Sie das Attribut, um einen reaktionsfähigen Wert von ref zu überwachen.

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

reaktive Definition Änderungen in Daten

Daten, die mit reaktiv definiert wurden, können mit watch nicht korrekt einen neuen Wert erhalten

, und die Tiefenüberwachung muss geöffnet werden

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

②Überwachen Sie ein bestimmtes Attribut der durch reaktive definierten Reaktionsdaten

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

③Überwachung bestimmter Attribute von reaktionsfähigen Daten, die durch reaktiv definiert sind

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

④Besondere Situation

Hinweis: In dieser Situation wird ein bestimmtes Attribut im durch reaktiv definierten Objekt überwacht, daher kann die Tiefe aktiviert werden

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

">

Das obige ist der detaillierte Inhalt vonWelche Punkte sind beim Vue3-Setup zu beachten und welche Überwachungsattribute gibt es?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!