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依旧不能获取
