vue3 watch侦听响应式数据案例

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

let sum = ref(0)
let name = ref('叶志远')
let person = reactive({
    name: '叶志远',
    age: 25,
    job: {
        j1: {
            salary: 9
        }
    }
})
let city = reactive(['广州', '深圳', '佛山'])

// 情况一, 监听一个响应式数据
// watch(sum, (newVal, oldVal) => {
//     console.log('监听sum++', newVal, oldVal)
// })

// 情况二、监听多个响应式数据
// watch([sum, name], (newVal, oldVal) => {
//     console.log('监听sum++与修改名字', newVal, oldVal)
// })

// 情况三、监听一个响应式对象、默认会开启深度监听、无法获取旧值
// watch(person, (newVal, oldVal) => {
//     console.log('监听person', newVal, oldVal)
// })

// 情况四、监听响应式对象属性
// watch(() => person.job.j1.salary, (newVal, oldVal) => {
//     console.log('监听涨薪', newVal, oldVal)
// })

// 情况五、监听响应式对象的对象属性、要开启深度监听、否则无法监听
// watch(() => person.job, (newVal, oldVal) => {
//     console.log('监听涨薪', newVal, oldVal)
// }, { deep: true })

// 情况六、监听数组
watch(city, (newVal, oldVal) => {
    console.log('监听城市', newVal, oldVal)
})

// 情况七、立即监听、使用了哪几个响应式数据会自动追踪并且监听
watchEffect(() => {
    let myName = name.value
    let s1 = sum.value
    console.log(s1)
    console.log(myName)
})

let i = 0
let changeCity = () => {
    city[i] = city[i]+'-'+i
    i < 2 ? i++ : i = 0
}
</script>

<template>
    <h2>{{ sum }}</h2>
    <button @click="sum++">加加</button>
    <hr />
    <h2>{{ name }}</h2>
    <button @click="name+='!'">修改姓名</button>
    <hr/>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <h2>薪资：{{ person.job.j1.salary }}k</h2>
    <h2>城市：{{ city }}</h2>
    <button @click="person.name+='~'">修改姓名</button>
    <button @click="person.job.j1.salary++">涨薪</button>
    <button @click="changeCity">切换城市</button>
</template>