vue3里watch和watchEffect的使用
1.在页面中引用watch
import {reactive,watch, ref} from 'vue'
2.在setup函数中使用watch监听ref定义的数据
//监听ref所定义的一个数据 newValue改变后新数据,变化前的旧数据 watch(sum,(newValue,oldValue)=>{ console.log('sum is changed',newValue,oldValue); },{immediate:true}) //immediate 立即执行
监听多个数据
//监听ref所定义的多个数据 watch([sum,msg],(newValue,oldValue)=>{ console.log('sum and msg is changed',newValue,oldValue); })
newValue和oldValue里数组的值和 [sum,msg] 的顺序是对应的
3.监听reactive所定义的响应式数据
<template> <!-- vue3中模版结构可以没有根标签 --> <div>姓名:{{person.name}}</div> <div>年龄:{{person.age}}</div> <div>薪水:{{person.job.j1.salary}}k</div> <button @click="person.name = '张三'">改名</button> <button @click="person.age++">增龄</button> <button @click="person.job.j1.salary++">涨薪</button> </template>
<script> // import { h } from 'vue' import {reactive,watch, ref} from 'vue' export default { components: { demo }, name: 'App', setup(){ let sum = ref(0) let msg = ref('hello boys') let person = reactive({ name:'章三', age:18, job:{ j1:{ salary:20 } } }) //监听reactive所定义的一个响应式数据的全部属性 // 注意1.此处无法正确获取oldvalue // 注意2.默认强制开启了深度监听,配置deep:false无效 当前使用的vue版本3.2.20 vue/cli 4.5.15 watch(person,(newValue,oldValue)=>{ console.log('person is changed',newValue,oldValue); }) //监听reactive所定义的一个响应式数据的某个属性 watch(()=>person.name,(newValue,oldValue)=>{ console.log('person.name is changed',newValue,oldValue); }) //监听reactive所定义的一个响应式数据的某些属性 watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{ console.log('person.name person.age is changed',newValue,oldValue); }) //特殊情况 监听响应式数据里的某个对象的属性需要配置deep watch(()=>person.job,(newValue,oldValue)=>{ console.log('person.job is changed',newValue,oldValue) },{deep:true}) return { data, // total, // fullName sum, msg, person } } } </script>
watchEffect
//不用指明监视的某个属性,监视的回调中用到哪个属性,那就监视哪个属性 watchEffect(()=>{ const x1 = person.job.j1.salary const x2 = sum.value console.log(' watcheffet回调执行了',x1,x2); })
watchEffect有点像computed,
computed注重值(回调函数的返回值),所有必须要写返回值
wacthEffect更注重过程(回调函数的函数体),所以不用写返回值,只要函数体内某个属性发生了变化,就重新走一遍流程。