惠民县建设网站,建一个优化网站多少钱,泰州网站快速排名优化,百度发布watch函数
作用#xff1a;侦听一个或者多个数据的变化#xff0c;数据变化时执行回调函数 两个额外参数#xff1a; 1.immediate#xff08;立即执行#xff09;2.deep#xff08;深度侦听#xff09;
场景#xff1a;比如选择不同的内容请求后端不同数据时 如下图 …watch函数
作用侦听一个或者多个数据的变化数据变化时执行回调函数 两个额外参数 1.immediate立即执行2.deep深度侦听
场景比如选择不同的内容请求后端不同数据时 如下图
基础使用—侦听单个数据
1.导入watch函数 2.执行watch函数传入要侦听的响应式数据ref对象和回调函数
script setup// 1. 导入watchimport { ref, watch } from vueconst count ref(0)// 2. 调用watch 侦听变化watch(count, (newValue, oldValue){console.log(count发生了变化老值为${oldValue},新值为${newValue})})
/script基础使用—侦听多个数据
说明同时侦听多个响应式数据的变化不管拿个数据变化都需要执行回调
script setup// 1. 导入watchimport { ref, watch } from vueconst count ref(0)const name ref(cp)// 2. 调用watch 侦听变化watch([count, name], ([newCount, newName],[oldCount,oldName]){console.log(count或者name变化了[newCount, newName],[oldCount,oldName])})
/script额外参数——immediate
在侦听器创建时立即出发回调响应式数据变化之后继续执行回调
script setup// 1. 导入watchimport { ref, watch } from vueconst count ref(0)// 2. 调用watch 侦听变化watch(count, (newValue, oldValue){console.log(count发生了变化老值为${oldValue},新值为${newValue})},{immediate: true})
/script额外参数——deep
通过watch监听的ref对象默认是浅层侦听的直接修改嵌套的对象属性不会触发回调执行需要开启deep deep有性能损耗 在绝大数情况下不建议开启
script setup// 1. 导入watchimport { ref, watch } from vueconst state ref({ count: 0 })// 2. 监听对象statewatch(state, (){console.log(数据变化了)})const changeStateByCount (){// 直接修改不会引发回调执行state.value.count}
/script
script setup// 1. 导入watchimport { ref, watch } from vueconst state ref({ count: 0 })// 2. 监听对象state 并开启deepwatch(state, (){console.log(数据变化了)},{deep:true})const changeStateByCount (){// 此时修改可以触发回调state.value.count}
/script精准侦听对象的某个属性
需求在不开启deep的前提下侦听age的变化只有age变化时才执行回调
watch state.value.age, {console.log(age发生变化了)}总结
1️⃣作为watch函数的第一个参数ref对象需要添加.value吗 不需要watch会自动读取
2️⃣watch只能侦听单个数据吗 单个或者多个
3️⃣不开启deep直接修改嵌套属性能触发回调吗 不能默认是浅层侦听
4️⃣不开启deep想再某个层次比较深的属性变化时执行回调怎么做 可以把第一个参数写成函数的写法返回要监听的具体属性
