一个成功的网站必须具备,网站开发一个人可以完成吗,杭州网站优化方案,成都网站搜索引擎优化watch是什么#xff1f;
在 Vue 3 中#xff0c;watch 函数被重新设计为一个独立的 API#xff0c;用于观察数据变化并执行相应的操作。
watch 函数接受两个参数#xff1a;
第一个参数可以是一个函数或数组。如果是函数#xff0c;则返回要监听的数据#xff0c;当数…watch是什么
在 Vue 3 中watch 函数被重新设计为一个独立的 API用于观察数据变化并执行相应的操作。
watch 函数接受两个参数
第一个参数可以是一个函数或数组。如果是函数则返回要监听的数据当数据变化时会触发回调函数如果是数组则返回一个数组包含要监听的多个数据当任意一个数据变化时都会触发回调函数。第二个参数是一个回调函数用于处理数据变化时的操作。回调函数接收两个参数第一个参数为新值第二个参数为旧值。有两个额外的参数1.immediate画面加载后立即执行2.deep深度侦听
案例1-监听单个数据
templateh1数量变化1{{ count1 }}/h1button clickaddcountcount/单监听/button
/templatescript setup
// 导入watch
import {ref , watch} from vue// 声明变量count
const count1ref(0)// count触发方法
const addcount(){count1.value
}// 触发监听器---单个数据监听
watch(count1,(newValue,oldValue){console.log(count发生变化啦旧值为${oldValue},新值为${newValue});
})
/scriptstyle langless scoped/style
传入要侦听的响应式数据ref对象和回调函数。回调中可以拿到新值和旧值 案例2-监听单个数据
templateh1数量变化2{{ name }}/{{ count2 }}/h1button clickrepnamecount/双监听/button
/templatescript setup
// 导入watch
import {ref , watch} from vue// 声明变量count
const nameref(李明)
const count2ref(0)// 触发方法
const repname(){count2.valuename.value李四到此一游
}// 触发监听器---多个数据监听
watch([count2,name],([newCount,newName],[oldCount,oldName]){console.log(count变化旧值为${oldCount},新值为${newCount});console.log(name变化旧值为${oldName},新值为${newName});
})
/scriptstyle langless scoped/style
以数组的方式传入多个ref变量其中一个变化就会触发侦听的回调函数回调中可以拿到新值和旧值 监听多个值的变化并计算结果小案例
templateel-form :modelform label-width120pxel-form-item label价格el-input v-modelform.price //el-form-itemel-form-item label数量el-input v-modelform.count //el-form-itemel-form-item label总价el-input v-modelform.total :readonlytrue //el-form-itemel-form-itemel-button clicksetForm计算/el-button/el-form-item/el-form
/templatescript setup
import { ref, watch } from vue;const form ref({ price: , count: , total: }
);const setForm () {form.value {price: 24,count: 400,total: 9600}
}// immediate立刻执行进入页面就执行一次一般用于画面的初始化显示。
watch(form, (newVal, oldVal) {console.log(进入页面执行了)console.log(新 newVal 旧 oldVal);
}, {immediate: true
})// deep深度监视如果要监听的响应式对象中有多个属性默认是浅层监听。
// 传入的响应式对象如果是简单类型可以直接监听如果是复杂类型监视不到复杂类型内部属性的变化,按照下面的示例只有form.value重新设置了一个对象监听才会触发
// 只有对象的地址发生了变化才会触发监听设置deep为true时对象及对象中的某个属性发生变化时也可以监听到
// 如果对象中的属性过多会影响使用一般不建议开深度监听// 深度监听
watch(form, (newval, oldVal) {console.log(深度监听触发)console.log(newval);
}, { deep: true })// 精确侦听对象的某个属性
watch(() form.value.price,(newVal, oldVal) {console.log(精确侦听对象的某个属性);console.log(newVal, oldVal);}
)// 可以侦听某两个属性操作后的值
watch(() Number(form.value.price) * Number(form.value.count),(sum) {console.log(执行了);form.value.total if (sum) {form.value.total sum.toFixed(2);}}
)
/scriptstyle/style
