So verwenden Sie „computed“, „watch“, „watchEffect“ in Vue3

1. Berechnet

rrree

• 1. Wenn: oldValue nicht korrekt abgerufen werden kann, wird die Tiefenüberwachung erzwungen.

• Wann Überwachen eines bestimmten Attributs in den reaktiven Daten, die durch reaktiv definiert sind: Die tiefe Konfiguration ist gültig

• watch Sie können auch ein Konfigurationselement übergeben und sofortige und andere Konfigurationen übergeben in:

  <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. Situation zwei: Wenn mehrere Informationen gleichzeitig überwacht werden müssen

  <template>
    <h3>当前求和为：{{ 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>

3 3: Überwachen Sie reaktionsfähige Daten, die durch reaktive Attribute definiert sind

<template>
  <h3>当前求和为：{{ 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>

5. Szenario 5: Überwachen Sie einige Attribute reaktionsfähiger Daten, die durch reaktive definiert sind

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

6. Besondere Umstände, Überwachung eines Objektattributs im Objekt, um deep:true zu starten

<template>
  <h3>当前求和为：{{ sum }}</h3>
  <button @click="sum++">点我sum++</button>
  <hr/>
  <h3>信息为：{{ 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>

7. Überwachen Sie die durch ref definierten Objektantwortdaten, die .value oder deep:true erfordern

<template>
  <h3>姓名：{{ person.name }}</h3>
  <h3>年龄：{{ person.age }}</h3>
  <h3>薪资：{{ 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>

3. Die Routine von watchEffect

watch ist: beide angeben. Beim Überwachen von Attributen müssen Sie auch den überwachten Rückruf angeben

watchEffect Die Routine ist: Sie Sie müssen nicht angeben, welches Attribut überwacht wird, welches Attribut im überwachten Rückruf verwendet wird und welches Attribut dann überwacht wird

watchEffectEin bisschen wie berechnet:

. Aber berechnet konzentriert sich auf den berechneten Wert (den Rückgabewert der Rückruffunktion), daher muss der Rückgabewert geschrieben werden

. Und watchEffect schenkt dem Prozess (dem Funktionskörper der Rückruffunktion) mehr Aufmerksamkeit, sodass der Rückgabewert nicht geschrieben werden muss

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

Verwenden Sie beispielsweise das obige Beispiel:

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

Schließlich verwenden wir watch und watchEffect, um Beispiele für Namen

watch(()=>person.job, (newValue, oldValue) => {
	console.log("person的job发生了变化", newValue, oldValue);
},{deep:true})//由于监视的是reactive对象中的某个属性，deep奏效

zu implementieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie „computed“, „watch“, „watchEffect“ in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!