Maison > Article > interface Web > Comment utiliser calculé, regarder, watchEffect dans Vue3
Comment utiliser calculé, regarder, watchEffect dans Vue3
- 王林avant
- 2023-05-12 20:04:101444parcourir
1. calculé
<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>2. watch
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>Vue3 Écrivez comme ceci - 1 Situation 1 : Surveiller une donnée réactive définie par ref
<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);
})
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 watchEffectwatch 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!
Articles Liés
Voir plus- À propos de vue utilisant le validateur : VeeValidate3
- Quelles sont les différences entre calculé et méthode dans Vue ?
- Introduction à la méthode de désactivation de la vérification Eslint dans le projet vue
- Introduction à plusieurs méthodes de définition de modèles de composants dans Vue.js
- Quatre endroits pour implémenter AJAX dans les applications Vue