vue3.0之-watch全面解析

1、监听ref()创建的基本数据类型

栗子1，监听多个数据

<template>
    <div class="">
        <h1>{{url}}</h1>
        <h1>{{sum}}</h1>
        <button @click="url+='6'">修改url</button>
        <button @click="sum++">修改sum</button>
    </div>
</template>
<script>
import { watch, ref} from 'vue';
export default {
    name:"",
    setup(){
        let url=ref("www.webtools.wang");
        let sum=ref(1);
        watch([sum,url],(newvalue,oldvalue)=>{
            console.log(newvalue,oldvalue)
        },{immediate:false})
        return {
            sum,
            url
        }
    }
}
</script>

-----------------------------------------------------------------------

栗子2，监听1个数据
<template>
    <div class="">
        <h1>{{url}}</h1>
        <button @click="url+='6'">修改url</button>
        <button @click="sum++">修改sum</button>
    </div>
</template>
<script>
import { watch, ref} from 'vue';
export default {
    name:"",
    setup(){
        let url=ref("www.webtools.wang");
        watch(url,(newvalue,oldvalue)=>{
            console.log(newvalue,oldvalue)
        },{immediate:false})
        return {
            url
        }
    }
}
</script>

2、监听ref()创建的的对象

ref()的作用是创建响应式数据，vue3.x创建响应式数据还有一个函数，reactive(),二者的区别是：前者主要负责基本数据类型，后者只能创建应用类型的响应式数据。当然如果一定要用ref()创建对象类型的响应式数据的话，它也是能够处理的，在vue3.x内部，最终会交由reactive()处理。

栗子1
<template>
    <div>
        <h1>{{person.name}}</h1>
        <h1>{{person.age}}</h1>
        <button @click="person.age++">修改age</button>
    </div>
</template>
<script>
import {ref,watch} from 'vue'
export default {
    name:"",
    setup(){
        let person=ref({
            name:"chenxuan",
            age:18
        })
        // 此处监听不到
        // watch(person,(newvalue,oldvalue)=>{
        //     console.log("监听到了变化!")
        // })

        // 解决方法1
        // 使用ref创建引用类型的响应数据，在vue内部最终还是通过reactive实现的
        // person.value 相当于在监听reactive创建的响应数据
        // watch(person.value,(newvalue,oldvalue)=>{
        //     console.log("监听到了age变化!")
        // })

        // 解决方法2，开启深度监听
        watch(person.value,(newvalue,oldvalue)=>{
            console.log("监听到了age变化!")
        },{deep:true})
        return{
            person
        }
    }
}
</script>

3、监听reactive创建的对象

栗子1
<template>
    <div class="">
        <h1>{{person.name}}</h1>
        <h1>{{person.age}}</h1>
        <h1>{{person.school.address}}</h1>
        <button @click="person.name+='~'">修改name</button>
        <button @click="person.age++">修改age</button>
        <button @click="person.school.address+='!'">修改嵌套较深的数据</button>
    </div>
</template>
<script>
import { watch, reactive} from 'vue';
export default {
    name:"",
    setup(){
        let person=reactive({
            name:"www.webtools.wang",
            age:18,
            school:{
                address:"北京大学"
            }
        });
        watch(person,(newvalue,oldvalue)=>{
            console.log("监听到了")
        })
        return {
            person
        }
    }
}

</script>

注：这种监听方式有问题
1、强制开启深度监听，并且deep:false不起作用，可能监听了很多与业务需求不符的数据，造成资源浪费
2、oldvalue无法获取

------------------------------------------------------------

栗子2，精确监听，解决强制开启深度监听导致的资源浪费问题

<template>
    <div class="">
        <h1>{{person.name}}</h1>
        <h1>{{person.age}}</h1>
        <h1>{{person.school.address}}</h1>
        <button @click="person.name+='~'">修改name</button>
        <button @click="person.age++">修改age</button>
        <button @click="person.school.address+='!'">修改嵌套较深的数据</button>
    </div>
</template>
<script>
import { watch, reactive} from 'vue';
export default {
    name:"",
    setup(){
        let person=reactive({
            name:"chenxuan",
            age:18,
            school:{
                address:"北京大学"
            }
        });
        watch(()=>person.age,(newvalue,oldvalue)=>{
            console.log("监听到了age变化")
        })
        watch(()=>person.name,(newvalue,oldvalue)=>{
            console.log("监听到了name变化")
        })
        return {
            person
        }
    }
}
</script>


--------------------------------------------------’

栗子3，精确监听多个属性值
<template>
    <div class="">
        <h1>{{person.name}}</h1>
        <h1>{{person.age}}</h1>
        <h1>{{person.school.address}}</h1>
        <button @click="person.name+='~'">修改name</button>
        <button @click="person.age++">修改age</button>
        <button @click="person.school.address+='!'">修改嵌套较深的数据</button>
    </div>
</template>
<script>
import { watch, reactive} from 'vue';
export default {
    name:"",
    setup(){
        let person=reactive({
            name:"chenxuan",
            age:18,
            school:{
                address:"北京大学"
            }
        });
        watch([()=>person.age,()=>person.name],(newvalue,oldvalue)=>{
            console.log("监听到了age/name变化")
        })
        return {
            person
        }
    }
}
</script>

栗子4，监听嵌套较深的数据
<template>
    <div class="">
        <h1>{{person.name}}</h1>
        <h1>{{person.age}}</h1>
        <h1>{{person.school.hehe.address}}</h1>
        <button @click="person.name+='~'">修改name</button>
        <button @click="person.age++">修改age</button>
        <button @click="person.school.hehe.address+='!'">修改嵌套较深的数据</button>
    </div>
</template>
<script>
import { watch, reactive} from 'vue';
export default {
    name:"",
    setup(){
        let person=reactive({
            name:"chenxuan",
            age:18,
            school:{
                hehe:{
                    address:"北京大学"
                }
                
            }
        });
        watch(()=>person.school,(newvalue,oldvalue)=>{
            console.log("监听到了address的变化")
        },{deep:true})
        return {
            person
        }
    }
}
</script>
注：此时oldvalue依旧不能获取