前端学习-vue视频学习006-watch监视、watchEffect

尚硅谷视频链接

watch监视的5种情况

情况1 监视【ref】定义的【基本类型】数据

<template>
    <div class="person">
        <h1>情况1:监视【ref】定义的【基本类型】数据</h1>
        <h2>求和:{{ sum }}</h2>
        <button @click="changeSum">sum+1</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import {ref,watch} from 'vue'
    
    let sum = ref(0)
    function changeSum() {
        sum.value += 1
    }
    // 增加监视
    // watch(sum,(newVal,oldVal)=>{
    //     console.log('sum changed',newVal,oldVal);
    // })
    // 停止监视
    const stopWatch = watch(sum,(newVal,oldVal)=>{
        console.log('sum changed',newVal,oldVal);
        if(newVal >= 10) {
            stopWatch()
        }
        return 0
    })
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    
    button {
        margin : 0 5px;
    }

    li {
        font-size : 20px;
    }
</style>

情况2:监视【ref】定义的【对象类型】数据

<template>
    <div class="person">
        <h1>情况2:监视【ref】定义的【对象类型】数据</h1>
        <h2>姓名:{{person.name}}</h2>
        <h2>年龄:{{person.age}}</h2>
        <button @click="changeName">changeName</button>
        <button @click="changeAge">changeAge</button>
        <button @click="changePerson">changePerson</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import {ref,watch} from 'vue'
    
    let person = ref({
        name:'zhangsan',
        age:20
    })
    function changeName(){
        person.value.name = 'lisi'
    }
    function changeAge(){
        person.value.age++
    }
    function changePerson(){
        person.value = {name:'lalala',age:30}
    }
    // 仅监视对象的地址值,当整个对象发生变化时,监视生效
    // watch(person,(newVal,oldVal)=>{
    //     console.log(newVal,oldVal);
    // })

    // 监视对象内部值的变化(开启深度监视deep 问题:此时由于对象没有变化,因此取到的新、旧值均为新值
    watch(person,(newVal,oldVal)=>{
        console.log(newVal,oldVal);
    },{deep:true})


</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    
    button {
        margin : 0 5px;
    }

    li {
        font-size : 20px;
    }
</style>

情况3:监视【reactive】定义的【对象类型】数据

  • 默认开启深度监视,无法关闭
<template>
    <div class="person">
        <h1>情况3:监视【reactive】定义的【对象类型】数据</h1>
        <h2>姓名:{{person.name}}</h2>
        <h2>年龄:{{person.age}}</h2>
        <button @click="changeName">changeName</button>
        <button @click="changeAge">changeAge</button>
        <button @click="changePerson">changePerson</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import {reactive,watch} from 'vue'
    
    let person = reactive({
        name:'zhangsan',
        age:20
    })
    function changeName(){
        person.name = 'lisi'
    }
    function changeAge(){
        person.age++
    }
    function changePerson(){
        // person = {name:'lalala',age:30}
        // 仅修改对象内的值,对象地址不变
        Object.assign(person,{name:'lalala',age:30})
    }
    // 仅监视对象的地址值,当整个对象发生变化时,监视生效
    // watch(person,(newVal,oldVal)=>{
    //     console.log(newVal,oldVal);
    // })

    // 默认开启深度监视
    watch(person,(newVal,oldVal)=>{
        console.log(newVal,oldVal)
    })

</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    
    button {
        margin : 0 5px;
    }

    li {
        font-size : 20px;
    }
</style>

情况4:监视【reactive/ref】定义的【对象类型】数据中的某个属性

推荐使用:函数+深度

<template>
    <div class="person">
        <h1>情况4:监视【reactive/ref】定义的【对象类型】数据中的某个属性</h1>
        <h2>姓名:{{person.name}}</h2>
        <h2>年龄:{{person.age}}</h2>
        <h2>车:{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
        <button @click="changeName">changeName</button>
        <button @click="changeAge">changeAge</button>
        <button @click="changeC1">changeC1</button>
        <button @click="changeC2">changeC2</button>
        <button @click="changeCar">changeCar</button>
    </div>
</template>

<script lang="ts" setup name="Person">
    import {reactive,watch} from 'vue'
    
    let person = reactive({
        name:'zhangsan',
        age:20,
        car:{
            c1:'第一',
            c2:'第二'
        }
    })
    function changeName(){
        person.name += '!'
    }
    function changeAge(){
        person.age++
    }
    function changeC1(){
        person.car.c1 = '333'
    }
    function changeC2(){
        person.car.c2 = '444'
    }
    function changeCar(){
        person.car = {
            c1:'555',
            c2:'666'
        }
    }
    
    // 要监视的值不是对象,需要写成函数
    watch(()=>person.name,(newVal,oldVal)=>{
        console.log('person.name changed',newVal,oldVal);
        
    })

    // 要监视是值仍然是对象,可以直接写,但建议写成函数
    // 直接写时,如果改变整个对象,则无法监视到
    watch(person.car,(newVal,oldVal)=>{
        console.log('person.car changed',newVal,oldVal)
    },{deep:true})
    // 写成函数+深度,可以监视到所有变化
    watch(()=>person.car,(newVal,oldVal)=>{
        console.log('person.car changed',newVal,oldVal)
    },{deep:true})

</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    
    button {
        margin : 0 5px;
    }

    li {
        font-size : 20px;
    }
</style>

情况5:监视上述的多个数据

使用数组

watch([()=>person.car.c1,()=>person.name],(newVal,oldVal)=>{
    console.log('person.car changed',newVal,oldVal)
},{deep:true})

watchEffect

    // 使用watch,需要监视这两个数据(如果有10个数据,要监视10个
    // watch([temp,height],()=>{
    //     if(temp.value > 50 || height.value > 70){
    //         console.log('hhhhhhhhhhhh')
    //     }
    // })

    // 使用watchEffect,自动监视所有变化的数据
    watchEffect(()=>{
        if(temp.value > 50 || height.value > 70){
            console.log('hhhhhhhhhhhh')
        }
    })
posted @   ayubene  阅读(26)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示