Rumah > Artikel > hujung hadapan web > Cara menggunakan jam tangan dan dikira dalam vue3
Cara menggunakan jam tangan dan dikira dalam vue3
- PHPzke hadapan
- 2023-05-20 22:16:04930semak imbas
1 jam tangan
1 Kesan data dalaman reaktif
<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>Nota: pada reaktif sendiri Pengubahsuaian akan. tidak 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.hobby, (newValue, oldValue) => {
// obj.hobby = { eat: '面条' }
console.log('对 reactive 自身的修改不会触发监听')
})
return { obj }
},
}
</script>
Pastikan anda tidak mengubah suai reaktif itu sendiri, pengubahsuaian itu sendiri tidak akan mencetuskan
2. Pantau data rujukan
2.1 Pantau data rujukan
2.2 Memantau berbilang data rujukan
boleh memantau perubahan umur dan nombor pada masa yang sama 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>
Cetuskan atribut pemantauan 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> {
immediate: true,
}
Dayakan Data rujukan pemantauan mendalam
<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>? 问题：修改 ref 对象里面的数据并不会触发监听，说明 ref 并不是默认开启 deep 的。见下
Menghadapi situasi sedemikian di mana jam tangan tidak dicetuskan, kami mempunyai tiga penyelesaian:
-
Penyelesaian 1 : Sudah tentu secara langsung Mengubah suai keseluruhan objek pasti akan dipantau (perhatikan bahawa pengubahsuaian obj dalam templat adalah bersamaan dengan mengubah suai obj.value).
-`{{ obj.hobby.eat }}
`
Penyelesaian 2: Dayakan pemantauan mendalam terhadap data rujukan.
<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>Tambahkan ayat sahaja, supaya tiada tangkapan skrin
Penyelesaian 3: Anda juga boleh mendengar rujukan .nilai untuk mencapai kesan yang sama.
Kerana jika objek dibalut di dalam ref, ia sebenarnya dilaksanakan dengan reaktif, yang boleh dibuktikan melalui kaedah isReactive.
watch(
obj,
(newValue, oldValue) => {
console.log(newValue, oldValue)
console.log(newValue === oldValue)
},
{
deep: true,
}
)
Memantau data biasa
Memantau nilai atribut biasa dalam objek responsif mesti dilakukan dengan mengembalikan fungsi (Jika objek/objek responsif dikembalikan, pemantauan mendalam perlu didayakan 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>2. dikira
Fungsi: Fungsi yang dikira digunakan untuk mentakrifkan sifat yang dikira di atas adalah sama seperti vue2. Mengenai Anda boleh beralih kepada takrifan dua mata pengetahuan ini dalam vue2: [vue2] penggunaan pengiraan dan mendengar.
<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>
Atas ialah kandungan terperinci Cara menggunakan jam tangan dan dikira dalam vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!