Heim >Web-Frontend >View.js >Welche Punkte sind beim Vue3-Setup zu beachten und welche Überwachungsattribute gibt es?
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, }; }, };
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 DatenDaten, 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!