Cara menggunakan pengiraan, jam tangan, watchEffect dalam Vue3

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 &#39;vue&#39;
export default {
  name: &#39;HelloWorld&#39;,
  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(&#39;-&#39;);
        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

Cara menulis vu2

<template>
  <h3 id="当前求和为-nbsp-sum-nbsp">当前求和为：{{ sum }}</h3>
  <button @click="sum++">点我sum++</button>
</template>

<script>
import {ref} from &#39;vue&#39;

export default {
  name: &#39;Demo&#39;,
  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 id="当前求和为-nbsp-sum-nbsp">当前求和为：{{ sum }}</h3>
  <button @click="sum++">点我sum++</button>>
</template>
<script>
import {ref, watch} from &#39;vue&#39;
export default {
  name: &#39;Demo&#39;,
  setup() {
    let sum = ref(0);
    let msg = ref("你好啊");
    //情况一：监视ref所定义的一个响应式数据
    watch(sum, (newValue, oldValue) => {
      console.log("sum发生了变化", newValue, oldValue);
    })

    return {
      sum
    }
  }
}
</script>

<. 🎜>

jam tangan juga boleh melepasi item konfigurasi, termasuk konfigurasi segera dan lain-lain:

watch(sum, (newValue, oldValue) => {
      console.log("sum发生了变化", newValue, oldValue);
    },{immediate:true})

2 Situasi 2: Apabila berbilang maklumat perlu dipantau pada masa yang sama

<template>
  <h3 id="当前求和为-nbsp-sum-nbsp">当前求和为：{{ sum }}</h3>
  <button @click="sum++">点我sum++</button>
  <hr/>
  <h3 id="信息为-nbsp-msg-nbsp">信息为：{{ msg }}</h3>
  <button @click="msg+=&#39;!&#39;">点我sum++</button>
</template>
<script>
import {ref, watch} from &#39;vue&#39;
export default {
  name: &#39;Demo&#39;,
  setup() {
    let sum = ref(0);
    let msg = ref("你好啊");

    //情况二：监视ref所定义的多个响应式数据
    watch([sum,msg],(newValue, oldValue) => {
      console.log("sum发生了变化", newValue, oldValue);
    })

    return {
      sum,
      msg
    }
  }
}
</script>

3 Kes 3: Pantau data responsif yang ditakrifkan oleh reaktif

<template>
  <h3 id="姓名-nbsp-person-name-nbsp">姓名：{{ person.name }}</h3>
  <h3 id="年龄-nbsp-person-age-nbsp">年龄：{{ person.age }}</h3>
  <h3 id="薪资-nbsp-person-job-j-salary-nbsp-K">薪资：{{ person.job.j1.salary }}K</h3>
  <button @click="person.name+=&#39;~&#39;">修改姓名</button>
  <button @click="person.age++">修改年龄</button>
  <button @click="person.job.j1.salary++">涨薪</button>
</template>
<script>
import {reactive, watch} from &#39;vue&#39;

export default {
  name: &#39;Demo&#39;,
  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 oleh reaktif

//情况四：监视reactive所定义的一个响应式数据某个属性
    watch(()=>person.name, (newValue, oldValue) => {
      console.log("person的name发生了变化", newValue, oldValue);
    })

5 Situasi 5: Pantau beberapa atribut data responsif yang ditakrifkan oleh reaktif

//情况五：监视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< Rutin bagi 🎜>

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

mesti ditulis. Dan

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 &#39;vue&#39;;
export default defineComponent({
  setup(){
    let person = reactive({
      firstName:"张",
      lastName:"三"
    });

    const fullName = ref(&#39;&#39;);

    watch(person,({firstName,lastName})=>{
      fullName.value = firstName+"-"+lastName
    },{immediate:true})

    //不用使用immediate，默认执行一次
    /*watchEffect(()=>{
      fullName.value = person.firstName+"-"+person.lastName
    })*/

    watchEffect(()=>{
      const name = fullName.value.split(&#39;-&#39;);
      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!