Rumah > Artikel > hujung hadapan web > Cara menggunakan pengiraan, jam tangan, watchEffect dalam Vue3
Cara menggunakan pengiraan, jam tangan, watchEffect dalam Vue3
- 王林ke hadapan
- 2023-05-12 20:04:101444semak imbas
1. dikira
<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 jam tangan
1 Selaras dengan fungsi konfigurasi jam dalam Vue2.x
- <.>2. Dua "pit" kecil:
- Apabila memantau data responsif yang ditakrifkan oleh reaktif: oldValue tidak boleh diperoleh dengan betul, dan pemantauan mendalam terpaksa dibuka (konfigurasi mendalam gagal)
- Apabila memantau atribut dalam data reaktif yang ditakrifkan oleh reaktif: konfigurasi dalam adalah sah
<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>
Tulis seperti ini dalam Vue3
1 Kes 1: Pantau data responsif yang ditakrifkan oleh 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(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>
<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>
//情况四：监视reactive所定义的一个响应式数据某个属性
watch(()=>person.name, (newValue, oldValue) => {
console.log("person的name发生了变化", newValue, oldValue);
})
//情况五：监视reactive所定义的一个响应式数据某个属性
watch([()=>person.name,()=>person.age], (newValue, oldValue) => {
console.log("person的name或age发生了变化", newValue, oldValue);
})<.>
6. Dalam keadaan istimewa, untuk memantau atribut objek dalam objek, mulakan deep:true
watch(()=>person.job, (newValue, oldValue) => {
console.log("person的job发生了变化", newValue, oldValue);
},{deep:true})//由于监视的是reactive对象中的某个属性，deep奏效7 ref Data respons memerlukan .value atau deep:true
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 Rutin watchEffect
ialah: nyatakan kedua-dua atribut yang dipantau dan panggilan balik yang dipantau
ialah: anda tidak perlu menentukan atribut mana yang hendak dipantau, atribut mana yang digunakan dalam panggilan balik pemantauan, kemudian atribut mana yang hendak dipantau watch
adalah sedikit seperti watchEffect:
. Tetapi watchEffect memfokuskan pada nilai yang dikira (nilai pulangan fungsi panggil balik), jadi nilai pulangan computed
memberi lebih perhatian kepada proses (badan fungsi fungsi panggil balik), jadi tidak perlu menulis nilai pulangan computed
//watchEffect所指定的回调中用到的数据只要发生变化,则直接重新执行回调
watchEffect(()=>{
const xl = sum.value
const x2 = person.age
console.log( "watchEffect配置的回调执行了")
})
Sebagai contoh, gunakan contoh di atas: 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>Akhir sekali , kami menggunakan watch dan watchEffect untuk melaksanakan contoh nama<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>
Atas ialah kandungan terperinci Cara menggunakan pengiraan, jam tangan, watchEffect dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!