watch属性
这里先写下Vue2的写法
vue2的写法
watch:{
简写
sum(newVal,oldVal){
console.log(newVal,oldVal)
},
完整写法
sum:{
immediate:true,//立即监听
deep:true,//深度监视
handler(newVal,oldVal){
console.log(newVal,oldVal)
}
}
}
在Vue3中watch变成了一个组合式api
第一步:引入watch
import {watch} from 'vue'
使用watch
在Vue3中watch是一个函数,组合api就是一个内置的函数
watch第一个参数就是监视目标,第二个参数是一个回调函数。里面有两个参数,分别是目标的新值以及旧值。第三个参数就是用来配置深度监视以及立即监听等。
watch(sum,(newVal,oldVal)=>{
console.log(newVal,oldVal)
},{immediate:true});
完整示例代码:
<template>
<div class="hello">
<h1>监视属性属性</h1>
<h2>当前求和为:{{sum}}</h2>
<button @click="sum++">+1</button>
<hr>
<h2>当前求和为:{{sum1}}</h2>
<button @click="sum1++">+1</button>
<hr>
<h2>姓名:{{obj.name}}</h2>
<h2>年龄:{{obj.age}}</h2>
<h2>薪资:{{obj.job.j1.salary}}</h2>
<button @click="obj.name+='-'">修改姓名</button>
<button @click="obj.age++">修改年龄</button>
</div>
</template>
<script>
import {ref,reactive,watch} from 'vue'
export default {
name: 'Home',
setup() {
let sum = ref(99);
let sum1 = ref(1);
let obj = reactive({
name:'小明',
age:99,
job:{
j1:{
salary:20
}
}
})
//情况一:监视ref所定义的一个响应式数据
watch(sum,(newVal,oldVal)=>{
console.log(newVal,oldVal)
},{immediate:true});
//情况二:监视ref所定义的多个响应式数据
watch([sum,sum1],(newVal,oldVal)=>{
console.log(newVal,oldVal)
},{immediate:true});
//情况三:监视reactive所定义的一个响应式数据的全部属性。
// 1.注意,此处无法正确的获取oldVal
// 1.注意,此处强制开启了深度监视(deep配置无效)
watch(obj,(newVal,oldVal)=>{
console.log(newVal, oldVal);
});
//情况四:监视reactive所定义的一个响应式数据下的某一个属性.
//不能直接obj.age。要写成一个函数,以函数返回值的形式。想监视谁就返回谁。
watch(()=>obj.age,(newVal,oldVal)=>{
console.log(newVal, oldVal);
});
// 情况五:监视reactive所定义的一个响应式数据下的多个属性.
//监视多个属性,写法还是以函数返回的形式。但是多个属性,要用数组包起来
watch([()=>obj.age,()=>obj.name],(newVal,oldVal)=>{
console.log(newVal, oldVal);
});
//特殊情况,此处由于是监视的是reactive定义的对象中的某个属性(这个属性的值得是某个对象),所以deep配置有效
watch(()=>obj.job,(newVal,oldVal)=>{
console.log(newVal, oldVal);
},{deep:true})
return {
sum,
sum1,
obj
}
},
// vue2的写法
// watch:{
// 简写
// sum(newVal,oldVal){
// console.log(newVal,oldVal)
// },
// 完整写法
// sum:{
// immediate:true,//立即监听
// deep:true,//深度监视
// handler(newVal,oldVal){
// console.log(newVal,oldVal)
// }
// }
// }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
以上就是Vue3中watch监视的基本用法。