vue3 wacth写法大全

vue
<script setup>
import { ref, reactive, watch, watchEffect, watchPostEffect, watchSyncEffect } from 'vue'
</script>

vue
<script setup>
import { ref, watch } from 'vue'
const num = ref(0)

watch(num, (newVal, oldVal) => {
console.log('新值：', newVal)
console.log('旧值：', oldVal)
})

// 修改数据
num.value = 10
// 输出：
// 新值：10
// 旧值：0
</script>

vue
<script setup>
import { ref, watch } from 'vue'
const num = ref(0)

watch(num, (newVal, oldVal) => {
console.log('新值：', newVal)
console.log('旧值：', oldVal)
}, { immediate: true })

// 无需修改，页面加载自动输出
// 首次加载输出：
// 新值：0
// 旧值：undefined

// 修改数据
num.value = 66
// 输出：
// 新值：66
// 旧值：0
</script>

vue
<script setup>
import { reactive, watch } from 'vue'
const user = reactive({ name: '小明', info: { age: 18 } })

watch(user, (newVal, oldVal) => {
console.log('新对象：', newVal)
console.log('旧对象：', oldVal)
}, { deep: true })

// 修改内层属性
user.info.age = 25
// 输出：
// 新对象：{ name: '小明', info: { age: 25 } }
// 旧对象：{ name: '小明', info: { age: 25 } }
</script>

vue
<script setup>
import { reactive, watch } from 'vue'
const user = reactive({ name: '小明', info: { age: 18 } })

watch(() => user.name, (newVal, oldVal) => {
console.log('新名字：', newVal)
console.log('旧名字：', oldVal)
})

// 修改name
user.name = '小红'
// 输出：
// 新名字：小红
// 旧名字：小明
</script>

vue
<script setup>
import { reactive, watch } from 'vue'
const user = reactive({ name: '小明', info: { age: 18 } })

watch(() => user.info.age, (newVal, oldVal) => {
console.log('新年龄：', newVal)
console.log('旧年龄：', oldVal)
})

// 修改嵌套属性
user.info.age = 30
// 输出：
// 新年龄：30
// 旧年龄：18
</script>

vue
<script setup>
import { ref, reactive, watch } from 'vue'
const keyword = ref('')
const user = reactive({ info: { age: 18 } })
const type = ref(1)

watch([keyword, () => user.info.age], ([newKey, newAge], [oldKey, oldAge]) => {
console.log('新关键词：', newKey)
console.log('新年龄：', newAge)
console.log('旧关键词：', oldKey)
console.log('旧年龄：', oldAge)
})

// 修改 keyword
keyword.value = '前端'
// 输出：
// 新关键词：前端
// 新年龄：18
// 旧关键词：''
// 旧年龄：18

// 修改年龄
user.info.age = 22
// 输出：
// 新关键词：前端
// 新年龄：22
// 旧关键词：前端
// 旧年龄：18
</script>

vue
<script setup>
import { ref, watch } from 'vue'
const num = ref(0)

watch(num, (newVal) => {
console.log('DOM更新完成，当前值：', newVal)
}, { flush: 'post' })

num.value = 99
// 等待DOM更新后输出：
// DOM更新完成，当前值：99
</script>

vue
<script setup>
import { ref, watch } from 'vue'
const num = ref(0)

const stopWatch = watch(num, (newVal) => {
console.log('数值变更：', newVal)
})

num.value = 10
// 输出：数值变更：10

// 停止监听
stopWatch()

num.value = 20
// 无任何打印输出
</script>

vue
<script setup>
import { reactive, watch } from 'vue'
const user = reactive({ name: '小明', info: { age: 18 } })

watch(
() => user.info.age,
(newVal, oldVal) => {
console.log('新年龄：', newVal)
console.log('旧年龄：', oldVal)
},
{
immediate: true,
deep: false,
flush: 'post',
onTrack(e) {
console.log('调试-收集依赖', e)
},
onTrigger(e) {
console.log('调试-触发监听', e)
}
}
)

// 页面初始化自动输出
// 新年龄：18
// 旧年龄：undefined

user.info.age = 28
// 输出：
// 调试-触发监听 ...
// 新年龄：28
// 旧年龄：18
</script>

vue
<script setup>
import { ref, reactive, watchEffect } from 'vue'
const num = ref(0)
const user = reactive({ name: '小明' })

watchEffect((onCleanup) => {
console.log('数字：', num.value, '用户名：', user.name)

// 副作用清理函数
onCleanup(() => {
console.log('执行清理操作')
})
})

// 页面初始化自动输出
// 数字：0 用户名：小明

num.value = 50
// 输出：
// 执行清理操作
// 数字：50 用户名：小明

user.name = '小李'
// 输出：
// 执行清理操作
// 数字：50 用户名：小李
</script>

vue
<script setup>
import { ref, watchPostEffect } from 'vue'
const num = ref(0)

watchPostEffect(() => {
console.log('DOM已更新，num值：', num.value)
})

num.value = 100
// DOM更新后输出：
// DOM已更新，num值：100
</script>

vue
<script setup>
import { ref, watchSyncEffect } from 'vue'
const num = ref(0)

watchSyncEffect(() => {
console.log('同步触发，num值：', num.value)
})

num.value = 88
// 立刻同步输出：
// 同步触发，num值：88
</script>