这篇文章主要介绍“VUE3中watch监听使用的方法有哪些”,在日常操作中,相信很多人在VUE3中watch监听使用的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”VUE3中watch监听使用的方法有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
watch介绍
vue中watch用来监听数据的响应式变化.获取数据变化前后的值
watch的完整入参
watch(监听的数据,副作用函数,配置对象)watch(data, (newData, oldData) => {}, {immediate: true, deep: true})
watch监听的不同情况
创建响应式数据
import { ref, watch, reactive } from "vue";let name = ref("moxun");let age = ref(18);let person = reactive({ Hobby: "photo", city: { jiangsu: { nanjing: "雨花台", }, },});
1 监听单个refimpl数据
watch(name, (newName, oldName) => { console.log("newName", newName);});
2 监听多个refimpl数据
方式一:vue3允许多个watch监听器存在
watch(name, (newValue, oldValue) => { console.log("new", newValue, "old", oldValue);});watch(age, (newValue, oldValue) => { console.log("new", newValue, "old", oldValue);});
方式二:将需要监听的数据添加到数组
watch([name, age], (newValue, oldValue) => { // 返回的数据是数组 console.log("new", newValue, "old", oldValue);});
3 监听proxy数据
注意
此时vue3将强制开启deep深度监听
当监听值为proxy对象时,oldValue值将出现异常,此时与newValue相同
// 监听proxy对象watch(person, (newValue, oldValue) => { console.log("newValue", newValue, "oldValue", oldValue);});
4 监听proxy数据的某个属性
需要将监听值写成函数返回形式,vue3无法直接监听对象的某个属性变化
watch( () => person.Hobby, (newValue, oldValue) => { console.log("newValue",newValue, "oldvalue", oldValue); });
注意
当监听proxy对象的属性为复杂数据类型时,需要开启deep深度监听
watch( () => person.city, (newvalue, oldvalue) => { console.log("person.city newvalue", newvalue, "oldvalue", oldvalue); },{ deep: true });
5 监听proxy数据的某些属性
watch([() => person.age, () => person.name], (newValue, oldValue) => { // 此时newValue为数组 console.log("person.age", newValue, oldValue);});
到此,关于“VUE3中watch监听使用的方法有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!