Artikel ini akan membantu anda mempelajari vue3 dan bercakap secara mendalam tentang cara menggunakan atribut yang dikira dan jam tangan pendengar, saya harap ia akan membantu anda!
1. Mengesan data dalaman reaktif
Nota: Pengubahsuaian kepada reaktif itu sendiri tidak akan mencetuskan pemantauan. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]
<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>Salin selepas log masuk
Pastikan tidak untuk mengubah suainya secara reaktif, pengubahsuaian itu sendiri tidak mencetuskan
<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>Salin selepas log masuk
2. Memantau data rujukan
2.1 Memantau Data rujukan
2.2 Memantau data rujukan berbilang
boleh memantau perubahan umur dan bilangan secara serentak dalam bentuk tatasusunan.
<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>Salin selepas log masuk
Cetuskan atribut mendengar dengan segera:
<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>Salin selepas log masuk
Dayakan data rujukan pemantauan mendalam
{
immediate: true,
}Salin selepas log masuk
<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>Salin selepas log masuk
Menghadapi situasi sedemikian di mana jam tangan tidak dicetuskan, kami mempunyai tiga penyelesaian:
? 问题：修改 ref 对象里面的数据并不会触发监听，说明 ref 并不是默认开启 deep 的。见下
Salin selepas log masuk
Penyelesaian 1: Sudah tentu, jika anda mengubah suai keseluruhan objek secara langsung, ia pasti akan dipantau (perhatikan bahawa pengubahsuaian obj dalam templat adalah bersamaan dengan mengubah suai obj.value).
<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>Salin selepas log masuk
-`
{{ obj.hobby.eat }}
Penyelesaian 2 : Dayakan pemantauan mendalam data rujukan.
Tambahkan ayat sahaja, jadi tiada tangkapan skrin
Penyelesaian 3: Anda juga boleh mencapai perkara yang sama dengan mendengar ref.value Kesan.
watch(
obj,
(newValue, oldValue) => {
console.log(newValue, oldValue)
console.log(newValue === oldValue)
},
{
deep: true,
}
)Salin selepas log masuk
Kerana jika objek dibalut di dalam ref, ia sebenarnya dilaksanakan dengan reaktif, yang boleh dibuktikan melalui kaedah isReactive.
Memantau data biasa
Memantau nilai atribut biasa dalam objek responsif mesti dilakukan dengan mengembalikan fungsi ( Jika objek /objek responsif dikembalikan, pemantauan mendalam perlu dihidupkan untuk mengubah suai data dalaman).
<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>Salin selepas log masuk
2 Perkara yang sama berlaku untuk vue2 Berkenaan dengan takrifan dua titik pengetahuan ini dalam vue2, anda boleh beralih ke:
.
<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>Salin selepas log masuk
(Belajar perkongsian video:
tutorial pengenalan vuejs
, Video pengaturcaraan asas)
Atas ialah kandungan terperinci Mari kita bincangkan tentang cara menggunakan jam tangan dan dikira dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
