1. Reaktive interne Daten erkennen
<template>
<p>{{ obj.hobby.eat }}</p>
<button @click="obj.hobby.eat = '面条'">click</button>
</template>
<script>
import { watch, reactive } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
name: 'ifer',
hobby: {
eat: '西瓜',
},
})
watch(obj, (newValue, oldValue) => {
// 注意1：监听对象的时候，新旧值是相等的
// 注意2：强制开启深度监听，配置无效
console.log('触发监听');
console.log(newValue === oldValue) // true
})
return { obj }
},
}
</script>Hinweis: Änderungen an Reaktiv selbst lösen keine Überwachung aus. [Verwandte Empfehlungen: Vuejs-Video-Tutorial, Web-Front-End-Entwicklung]
<template>
<p>{{ obj.hobby.eat }}</p>
<button @click="obj.hobby = { eat: '面条' }">click</button>
</template>
<script>
import { watch, reactive } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
name: 'ifer',
hobby: {
eat: '西瓜',
},
})
watch(obj.hobby, (newValue, oldValue) => {
// obj.hobby = { eat: '面条' }
console.log('对 reactive 自身的修改不会触发监听')
})
return { obj }
},
}
</script>
Achten Sie darauf, die Reaktivität selbst nicht zu ändern, da die Änderung selbst nicht ausgelöst wird
2. Referenzdaten überwachen
2.1 Überwachen Sie Referenzdaten
<template>
<p>{{ age }}</p>
<button @click="age++">click</button>
</template>
<script>
import { watch, ref } from 'vue'
export default {
name: 'App',
setup() {
const age = ref(18)
// 监听 ref 数据 age，会触发后面的回调，不需要 .value
watch(age, (newValue, oldValue) => {
console.log(newValue, oldValue)
})
return { age }
},
}
</script>2.2 Überwachen Sie mehrere Referenzdaten
Sie können Änderungen in Alter und Anzahl gleichzeitig in Form von Arrays überwachen.
<template>
<p>age: {{ age }} num: {{ num }}</p>
<button @click="handleClick">click</button>
</template>
<script>
import { watch, ref } from 'vue'
export default {
name: 'App',
setup() {
const age = ref(18)
const num = ref(0)
const handleClick = () => {
age.value++
num.value++
}
// 数组里面是 ref 数据
watch([age, num], (newValue, oldValue) => {
console.log(newValue, oldValue)
})
return { age, num, handleClick }
},
}
</script>
Lösen Sie das Überwachungsattribut sofort aus:
{
immediate: true,
}<template>
<p>{{ age }}</p>
<button @click="handleClick">click</button>
</template>
<script>
import { watch, ref } from 'vue'
export default {
name: 'App',
setup() {
const age = ref(18)
const handleClick = () => {
age.value++
}
watch(
age,
(newValue, oldValue) => {
console.log(newValue, oldValue) // 18 undefined
},
{
immediate: true,
}
)
return { age, handleClick }
},
}
</script>
Tiefenüberwachungs-Referenzdaten aktivieren
? 问题：修改 ref 对象里面的数据并不会触发监听，说明 ref 并不是默认开启 deep 的。见下
<template>
<p>{{ obj.hobby.eat }}</p>
<button @click="obj.hobby.eat = '面条'">修改 obj.hobby.eat</button>
</template>
<script>
import { watch, ref } from 'vue'
export default {
name: 'App',
setup() {
const obj = ref({
hobby: {
eat: '西瓜',
},
})
// 注意：ref 监听对象，默认监听的是这个对象地址的变化
watch(obj, (newValue, oldValue) => {
console.log(newValue === oldValue)
})
return { obj }
},
}
</script>
Angesichts einer solchen Uhr ist das so nicht ausgelöst wird, haben wir drei Lösungen:
Lösung 1: Wenn Sie das gesamte Objekt direkt ändern, wird es natürlich definitiv überwacht (beachten Sie, dass die Änderung von obj in der Vorlage der Änderung von obj.value entspricht).
-`
{{ obj.hobby.eat }}
`
Lösung 2: Aktivieren Sie eine umfassende Überwachung der Referenzdaten.
watch(
obj,
(newValue, oldValue) => {
console.log(newValue, oldValue)
console.log(newValue === oldValue)
},
{
deep: true,
}
)Einfach einen Satz hinzufügen, damit kein Screenshot entsteht
Lösung 3: Den gleichen Effekt können Sie auch durch die Überwachung von ref.value erzielen.
Denn wenn das Objekt in ref eingeschlossen ist, wird es tatsächlich mit reactive implementiert, was durch die isReactive-Methode bewiesen werden kann.
<template>
<p>{{ obj.hobby.eat }}</p>
<button @click="obj.hobby.eat = '面条'">修改 obj</button>
</template>
<script>
import { watch, ref } from 'vue'
export default {
name: 'App',
setup() {
const obj = ref({
hobby: {
eat: '西瓜',
},
})
watch(obj.value, (newValue, oldValue) => {
console.log(newValue, oldValue)
console.log(newValue === oldValue)
})
return { obj }
},
}
</script>
Überwachen gemeinsamer Daten
Die Überwachung eines gemeinsamen Attributwerts in einem reaktionsfähigen Objekt muss von der Funktion zurückgegeben werden (wenn ein Objekt/responsives Objekt zurückgegeben wird, erfordert die Änderung der internen Daten das Einschalten des Tiefenmonitors).
<template>
<p>{{ obj.hobby.eat }}</p>
<button @click="obj.hobby.eat = '面条'">修改 obj</button>
</template>
<script>
import { watch, reactive } from 'vue'
export default {
name: 'App',
setup() {
const obj = reactive({
hobby: {
eat: '西瓜',
},
})
// 把 obj.hobby 作为普通值去进行监听，只能监听到 obj.hobby 自身的变化
/* watch(
() => obj.hobby,
(newValue, oldValue) => {
console.log(newValue, oldValue)
console.log(newValue === oldValue)
}
) */
// 如果开启了深度监听，则能监听到 obj.hobby 和内部数据的所有变化
/* watch(
() => obj.hobby,
(newValue, oldValue) => {
console.log(newValue, oldValue)
console.log(newValue === oldValue)
},
{
deep: true,
}
) */
// 能监听影响到 obj.hobby.eat 变化的操作，例如 obj.hobby = { eat: '面条' } 或 obj.hobby.eat = '面条'，如果是 reactive 直接对 obj 的修改则不会被监听到（ref 可以）
watch(
() => obj.hobby.eat,
(newValue, oldValue) => {
console.log(newValue, oldValue)
console.log(newValue === oldValue)
}
)
return { obj }
},
}
</script>Funktion: Die oben genannten Grundkonzepte sind die gleichen wie bei vue2. Sie können zu: [vue2] Verwendung von Berechnung und Zuhören.
<template>
<p>firstName: {{ person.firstName }}</p>
<p>lastName: {{ person.lastName }}</p>
<input type="text" v-model="person.fullName" />
</template>
<script>
import { computed, reactive } from 'vue'
export default {
name: 'App',
setup() {
const person = reactive({
firstName: '初',
lastName: '映',
})
// 也可以传入对象，目前和上面等价
person.fullName = computed({
get() {
return person.firstName + '*' + person.lastName
},
set(value) {
console.log(value,'value');//为上述get的返回值
const newArr = value.split('*')
person.firstName = newArr[0]
person.lastName = newArr[1]
},
})
return {
person,
}
},
}
</script>
Das obige ist der detaillierte Inhalt vonSo verwenden Sie Watch und Computing in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
