萍乡企业网站制作,网站流量指数,户外运动网站建设策划,网站如何开发触屏版9. watch
作用#xff1a;监视数据的变化#xff08;和Vue2中的watch作用一致#xff09;特点#xff1a;Vue3中的watch只能监视以下四种数据#xff1a; ref定义的数据。reactive定义的数据。函数返回一个值#xff08;getter函数#xff09;。一个包含上述内容的数组…9. watch
作用监视数据的变化和Vue2中的watch作用一致特点Vue3中的watch只能监视以下四种数据 ref定义的数据。reactive定义的数据。函数返回一个值getter函数。一个包含上述内容的数组。 我们在Vue3中使用watch的时候通常会遇到以下几种情况
作用监视数据的变化和Vue2中的watch作用一致特点Vue3中的watch只能监视以下四种数据 ref定义的数据。reactive定义的数据。函数返回一个值getter函数。一个包含上述内容的数组。 我们在Vue3中使用watch的时候通常会遇到以下几种情况
* 情况一
监视ref定义的【基本类型】数据直接写数据名即可监视的是其value值的改变。
templatediv classpersonh1情况一监视【ref】定义的【基本类型】数据/h1h2当前求和为{{sum}}/h2button clickchangeSum点我sum1/button/div
/templatescript langts setup namePersonimport {ref,watch} from vue// 数据let sum ref(0)// 方法function changeSum(){sum.value 1}// 监视情况一监视【ref】定义的【基本类型】数据const stopWatch watch(sum,(newValue,oldValue){console.log(sum变化了,newValue,oldValue)if(newValue 10){stopWatch()}})
/script* 情况二
监视ref定义的【对象类型】数据直接写数据名监视的是对象的【地址值】若想监视对象内部的数据要手动开启深度监视。 注意 若修改的是ref定义的对象中的属性newValue 和 oldValue 都是新值因为它们是同一个对象。 若修改整个ref定义的对象newValue 是新值 oldValue 是旧值因为不是同一个对象了。 templatediv classpersonh1情况二监视【ref】定义的【对象类型】数据/h1h2姓名{{ person.name }}/h2h2年龄{{ person.age }}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickchangePerson修改整个人/button/div
/templatescript langts setup namePersonimport {ref,watch} from vue// 数据let person ref({name:张三,age:18})// 方法function changeName(){person.value.name ~}function changeAge(){person.value.age 1}function changePerson(){person.value {name:李四,age:90}}/* 监视情况一监视【ref】定义的【对象类型】数据监视的是对象的地址值若想监视对象内部属性的变化需要手动开启深度监视watch的第一个参数是被监视的数据watch的第二个参数是监视的回调watch的第三个参数是配置对象deep、immediate等等..... */watch(person,(newValue,oldValue){console.log(person变化了,newValue,oldValue)},{deep:true})/script* 情况三
监视reactive定义的【对象类型】数据且默认开启了深度监视。
templatediv classpersonh1情况三监视【reactive】定义的【对象类型】数据/h1h2姓名{{ person.name }}/h2h2年龄{{ person.age }}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickchangePerson修改整个人/buttonhrh2测试{{obj.a.b.c}}/h2button clicktest修改obj.a.b.c/button/div
/templatescript langts setup namePersonimport {reactive,watch} from vue// 数据let person reactive({name:张三,age:18})let obj reactive({a:{b:{c:666}}})// 方法function changeName(){person.name ~}function changeAge(){person.age 1}function changePerson(){Object.assign(person,{name:李四,age:80})}function test(){obj.a.b.c 888}// 监视情况三监视【reactive】定义的【对象类型】数据且默认是开启深度监视的watch(person,(newValue,oldValue){console.log(person变化了,newValue,oldValue)})watch(obj,(newValue,oldValue){console.log(Obj变化了,newValue,oldValue)})
/script* 情况四
监视ref或reactive定义的【对象类型】数据中的某个属性注意点如下
若该属性值不是【对象类型】需要写成函数形式。若该属性值是依然是【对象类型】可直接编也可写成函数建议写成函数。
结论监视的要是对象里的属性那么最好写函数式注意点若是对象监视的是地址值需要关注对象内部需要手动开启深度监视。
templatediv classpersonh1情况四监视【ref】或【reactive】定义的【对象类型】数据中的某个属性/h1h2姓名{{ person.name }}/h2h2年龄{{ person.age }}/h2h2汽车{{ person.car.c1 }}、{{ person.car.c2 }}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickchangeC1修改第一台车/buttonbutton clickchangeC2修改第二台车/buttonbutton clickchangeCar修改整个车/button/div
/templatescript langts setup namePersonimport {reactive,watch} from vue// 数据let person reactive({name:张三,age:18,car:{c1:奔驰,c2:宝马}})// 方法function changeName(){person.name ~}function changeAge(){person.age 1}function changeC1(){person.car.c1 奥迪}function changeC2(){person.car.c2 大众}function changeCar(){person.car {c1:雅迪,c2:爱玛}}// 监视情况四监视响应式对象中的某个属性且该属性是基本类型的要写成函数式/* watch(() person.name,(newValue,oldValue){console.log(person.name变化了,newValue,oldValue)}) */// 监视情况四监视响应式对象中的某个属性且该属性是对象类型的可以直接写也能写函数更推荐写函数watch(()person.car,(newValue,oldValue){console.log(person.car变化了,newValue,oldValue)},{deep:true})
/script* 情况五
监视上述的多个数据
templatediv classpersonh1情况五监视上述的多个数据/h1h2姓名{{ person.name }}/h2h2年龄{{ person.age }}/h2h2汽车{{ person.car.c1 }}、{{ person.car.c2 }}/h2button clickchangeName修改名字/buttonbutton clickchangeAge修改年龄/buttonbutton clickchangeC1修改第一台车/buttonbutton clickchangeC2修改第二台车/buttonbutton clickchangeCar修改整个车/button/div
/templatescript langts setup namePersonimport {reactive,watch} from vue// 数据let person reactive({name:张三,age:18,car:{c1:奔驰,c2:宝马}})// 方法function changeName(){person.name ~}function changeAge(){person.age 1}function changeC1(){person.car.c1 奥迪}function changeC2(){person.car.c2 大众}function changeCar(){person.car {c1:雅迪,c2:爱玛}}// 监视情况五监视上述的多个数据watch([()person.name,person.car],(newValue,oldValue){console.log(person.car变化了,newValue,oldValue)},{deep:true})/script10. watchEffect 官网立即运行一个函数同时响应式地追踪其依赖并在依赖更改时重新执行该函数。 watch对比watchEffect 都能监听响应式数据的变化不同的是监听数据变化的方式不同 watch要明确指出监视的数据 watchEffect不用明确指出监视的数据函数中用到哪些属性那就监视哪些属性。 示例代码 templatediv classpersonh1需求水温达到50℃或水位达到20cm则联系服务器/h1h2 iddemo水温{{temp}}/h2h2水位{{height}}/h2button clickchangePrice水温1/buttonbutton clickchangeSum水位10/button/div
/templatescript langts setup namePersonimport {ref,watch,watchEffect} from vue// 数据let temp ref(0)let height ref(0)// 方法function changePrice(){temp.value 10}function changeSum(){height.value 1}// 用watch实现需要明确的指出要监视temp、heightwatch([temp,height],(value){// 从value中获取最新的temp值、height值const [newTemp,newHeight] value// 室温达到50℃或水位达到20cm立刻联系服务器if(newTemp 50 || newHeight 20){console.log(联系服务器)}})// 用watchEffect实现不用const stopWtach watchEffect((){// 室温达到50℃或水位达到20cm立刻联系服务器if(temp.value 50 || height.value 20){console.log(document.getElementById(demo)?.innerText)console.log(联系服务器)}// 水温达到100或水位达到50取消监视if(temp.value 100 || height.value 50){console.log(清理了)stopWtach()}})
/script
