Maison >interface Web >Voir.js >Comment utiliser calculé, regarder, watchEffect dans Vue3
<template> 姓:<input v-model="person.firstName"><br/><br/> 名:<input v-model="person.lastName"><br/><br/> <span>全名:{{person.fullname}}</span><br/><br/> <span>全名:<input v-model="person.fullname"></span> </template> <script> import {reactive,computed} from 'vue' export default { name: 'HelloWorld', setup(){ let person = reactive({ firstName:"张", lastName:"三" }) //computed简写形式,没考虑修改 /*person.fullname = computed(()=>{ return person.firstName+"-"+person.lastName; })*/ person.fullname = computed({ get(){ return person.firstName+"-"+person.lastName; }, set(value){ const nameArr = value.split('-'); person.firstName = nameArr[0]; person.lastName = nameArr[1]; } }) return{ person, } } } </script>
1. Conformément à la fonction de configuration de la montre dans Vue2 Lorsque : oldValue ne peut pas être obtenu correctement, la surveillance approfondie est forcée à s'ouvrir (la configuration approfondie n'est pas valide)
Quand surveiller un certain attribut dans les données réactives définies par réactif : la configuration profonde est valide
vu2 est écrit en
<template> <h3>当前求和为:{{ sum }}</h3> <button @click="sum++">点我sum++</button> </template> <script> import {ref} from 'vue' export default { name: 'Demo', watch: { /*sum(oldValue,newValue){ console.log("sum发生了变化",oldValue,newValue); }*/ sum: { immediate: true, deep:true, handler(newValue,oldValue) { console.log("sum发生了变化", newValue, oldValue); } } }, setup() { let sum = ref(0); return { sum, } } } </script>
<template> <h3>当前求和为:{{ sum }}</h3> <button @click="sum++">点我sum++</button>> </template> <script> import {ref, watch} from 'vue' export default { name: 'Demo', setup() { let sum = ref(0); let msg = ref("你好啊"); //情况一:监视ref所定义的一个响应式数据 watch(sum, (newValue, oldValue) => { console.log("sum发生了变化", newValue, oldValue); }) return { sum } } } </script>. watch Vous pouvez également transmettre un élément de configuration et transmettre des configurations immédiates et autres dans :
watch(sum, (newValue, oldValue) => {
console.log("sum发生了变化", newValue, oldValue);
},{immediate:true})
<template> <h3>当前求和为:{{ sum }}</h3> <button @click="sum++">点我sum++</button> <hr/> <h3>信息为:{{ msg }}</h3> <button @click="msg+='!'">点我sum++</button> </template> <script> import {ref, watch} from 'vue' export default { name: 'Demo', setup() { let sum = ref(0); let msg = ref("你好啊"); //情况二:监视ref所定义的多个响应式数据 watch([sum,msg],(newValue, oldValue) => { console.log("sum发生了变化", newValue, oldValue); }) return { sum, msg } } } </script>
3. Troisième cas : Surveiller des données réactives définies par réactif
<template> <h3>姓名:{{ person.name }}</h3> <h3>年龄:{{ person.age }}</h3> <h3>薪资:{{ person.job.j1.salary }}K</h3> <button @click="person.name+='~'">修改姓名</button> <button @click="person.age++">修改年龄</button> <button @click="person.job.j1.salary++">涨薪</button> </template> <script> import {reactive, watch} from 'vue' export default { name: 'Demo', setup() { let person = reactive({ name: "张三", age: 18, job:{ j1:{ salary:20 } } }) //情况三:监视reactive所定义的一个响应式数据全部属性 // 1\注意:无法正确获取oldvalue // 2\注意:强制开启了深度监视(deep配置无效) watch(person, (newValue, oldValue) => { console.log("person发生了变化", newValue, oldValue); }) return { person } } } </script>
4. Cas quatre : Surveiller des données réactives définies par des attributs réactifs
//情况四:监视reactive所定义的一个响应式数据某个属性 watch(()=>person.name, (newValue, oldValue) => { console.log("person的name发生了变化", newValue, oldValue); })
5 : Surveiller certains attributs de données réactives définies par réactif.
//情况五:监视reactive所定义的一个响应式数据某个属性
watch([()=>person.name,()=>person.age], (newValue, oldValue) => {
console.log("person的name或age发生了变化", newValue, oldValue);
})
6. Circonstances particulières, surveillance d'un attribut d'objet dans l'objet, pour démarrer deep:true
watch(()=>person.job, (newValue, oldValue) => {
console.log("person的job发生了变化", newValue, oldValue);
},{deep:true})//由于监视的是reactive对象中的某个属性,deep奏效
let person = ref({ name: "张三", age: 18, job:{ j1:{ salary:20 } } }) watch(person.value, (newValue, oldValue) => { console.log("person的value发生了变化", newValue, oldValue); }) 或 watch(person, (newValue, oldValue) => { console.log("person的value发生了变化", newValue, oldValue); },{deep:true})3. La routine de watchEffect
watch
est : les deux spécifient Lors de la surveillance des attributs, vous devez également spécifier le rappel surveillé
watchEffect
La routine est : vous pas besoin de spécifier quel attribut est surveillé, quel attribut est utilisé dans le rappel surveillé, puis quel attribut est surveilléwatchEffect
Un peu comme calculé
:
calculed
se concentre sur la valeur calculée (la valeur de retour de la fonction de rappel), donc la valeur de retour doit être écrite. Et watchEffect
accorde plus d'attention au processus (le corps de la fonction de rappel), il n'est donc pas nécessaire d'écrire la valeur de retour //watchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调 watchEffect(()=>{ const xl = sum.value const x2 = person.age console.log( "watchEffect配置的回调执行了") })
watch
的套路是:既要指明监视的属性,也要指明监视的回调
watchEffect
的套路是:不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性
watchEffect
有点像computed
:
。但computed
注重的计算出来的值(回调函数的返回值),所以必须要写返回值
。而watchEffect
import {reactive,watchEffect} from 'vue'
export default {
name: 'Demo',
setup() {
let person = reactive({
name: "张三",
age: 18,
job:{
j1:{
salary:20
}
}
})
watchEffect(()=>{
const x1 = person.name;
console.log("watchEffect所指定的回调执行了"+x1);
})
return {
person
}
}
}
</script>
Enfin, nous utilisons watch et watchEffect pour implémenter Exemples de noms
<template> 姓:<input v-model="person.firstName"> 名:<input v-model="person.lastName"> <span>全名:{{fullName}}</span> <span>全名:<input v-model="fullName"></span> </template> <script lang="ts"> import {defineComponent, reactive, ref,watch,watchEffect} from 'vue'; export default defineComponent({ setup(){ let person = reactive({ firstName:"张", lastName:"三" }); const fullName = ref(''); watch(person,({firstName,lastName})=>{ fullName.value = firstName+"-"+lastName },{immediate:true}) //不用使用immediate,默认执行一次 /*watchEffect(()=>{ fullName.value = person.firstName+"-"+person.lastName })*/ watchEffect(()=>{ const name = fullName.value.split('-'); person.firstName = name[0]; person.lastName = name[1]; }) return{ person, fullName } } }); </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!