Ein Artikel, der den Unterschied zwischen watch und watchEffect in Vue erklärt

Vorwort

Die Watch-Funktion und die watchEffect-Funktion sind beide Zuhörer. Es gibt gewisse Unterschiede in der Schreibweise und Verwendung. Es handelt sich um zwei verschiedene Formen derselben Funktion, aber die unterste Ebene ist dieselbe. [Verwandte Empfehlungen: vue.js Video-Tutorial]

Vergleich zwischen watch und watchEffect

watch

• watch Geben Sie abhängige Daten explizit an und führen Sie die Rückruffunktion aus, wenn die abhängigen Daten aktualisiert werden watch显式指定依赖数据，依赖数据更新时执行回调函数
• 具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行(设置immediate: true时可以变为非惰性，页面首次加载就会执行）
• 监视ref定义的响应式数据时可以获取到原值
• 既要指明监视的属性，也要指明监视的回调

watchEffect

• watchEffect Es weist einen gewissen Grad an Faulheit auf. Es wird nicht ausgeführt, wenn die Seite zum ersten Mal angezeigt wird. Es wird nur ausgeführt, wenn sich die Daten ändern (es kann nicht faul werden, wenn immediate: true festgelegt wird). , und es wird ausgeführt, wenn die Seite zum ersten Mal geladen wird). Der überwachte Rückruf

• watchEffect

• watchEffect wird automatisch erfasst. Abhängige Daten, wenn die abhängigen Daten aktualisiert werden

  führt sich selbst erneut aus

• wird sofort ausgeführt, es gibt keine Trägheit, Es wird ausgeführt, wenn die Seite zum ersten Mal geladen wird.

Der ursprüngliche Wert kann nicht abgerufen werden, sondern nur der geänderte Wert.

• Es ist nicht erforderlich, anzugeben, welches Attribut überwacht werden soll. Überwachen Sie einfach, welches Attribut verwendet wird im Überwachungsrückruf

• Eingehende Analyse der Überwachungsfunktion

Die Überwachungsfunktion weist zwei Fallstricke auf:

Überwachung der durch reaktiv definierten reaktiven Daten ( Die Daten sind ein Objekt, da reaktiv nur die definieren kann Antwort des Array- oder Objekttyps): oldValue kann nicht korrekt abgerufen werden, die Tiefenüberwachung muss aktiviert werden und die Tiefenkonfiguration wird nicht wirksam.

Wenn ein bestimmtes Attribut in den durch reaktiv definierten Reaktionsdaten überwacht wird und das Attribut ein Objekt ist, wird die Tiefenkonfiguration wirksam.

Die spezifische Verwendung der Watch-Funktion spiegelt sich im folgenden Code mit detaillierten Kommentaren wider wird im folgenden Code mit detaillierten Kommentaren angezeigt:

<template>
    <div>
        <h2>当前求和为：{{sum}}</h2>
        <button @click="sum++">点我+1</button>
        <hr>
        <h2>当前的信息为：{{msg}} </h2>
        <!-- 点击button拼接！ -->
        <button @click="msg+=&#39;!&#39;">修改数据</button>
        <hr>
        <h2>姓名：{{person.name}}</h2>
        <h2>年龄:{{person.age}}</h2>
        <h2>薪资：{{person.job.j1.salary}}</h2>
        <button @click="person.name+=&#39;~&#39;"> 修改姓名</button>
        <button @click="person.age++"> 增长年龄</button>
        <button @click="person.job.j1.salary++"> 增长薪资</button>
    </div>
</template>

<script>
import {ref,reactive,watch,watchEffect} from &#39;vue&#39;
export default {
   name:&#39;demo&#39;,
   setup(){
       //数据
       let sum = ref(0)
       let msg = ref(&#39;hello&#39;)
       let person = reactive({
           name:&#39;zhangsan&#39;,
           age:&#39;18&#39;,
           job:{
               j1:{
                   salary:20
               }
           }
       })
       //监视(三个参数，第一个是监视的对象，第二个是监视的回调函数，第三个是监视的配置)

       //情况一：监视ref所定义的一个响应式数据
       watch(sum,(newValue,oldValue)=>{
           console.log(&#39;sum的值变化了&#39;,newValue,oldValue)
       },{immediate:true,deep:true})
       //immediate的值为true时表示非惰性的立即执行的(默认情况下是false)
       //deep深层次触发（此处设置deep无意义）

       //情况二：监视ref所定义的多个响应式数据，写成数组的形式

       watch([sum,msg],(newValue,oldValue)=>{
           console.log(&#39;sum或者msg变了&#39;,newValue,oldValue)
       })

       //情况三：监视reactive所定义的响应式数据
                //若监视的是reactive定义的响应式数据，则无法正确获得oldValue
                //若监视的是reactive定义的响应式数据，则watch会强制开启深度监视

        //我们发现改变person的任意一个属性都会被监视到
        watch(person,(newValue,oldValue)=>{
            console.log(&#39;person改变了&#39;,newValue,oldValue)
        }) 
        
        //我们尝试设置deep:false,关闭深度监听（目的：改变job的值不会被watch监听到）
        //但是我们发现deep:false并没有生效，原因是此时watch监视的是reactive定义的响应式对象，默认强制开启了深度监听
        watch(person,(newValue,oldValue)=>{
            console.log(&#39;person改变了&#39;,newValue,oldValue)
        },{deep:false}) 
        


      //情况四：监视reactive所定义的响应式数据中的某个属性
       watch(()=>person.name,(newValue,oldValue)=>{
            console.log(&#39;person的job改变了&#39;,newValue,oldValue)
        })
         watch(()=>person.age,(newValue,oldValue)=>{
            console.log(&#39;person的job改变了&#39;,newValue,oldValue)
        })
        watch(()=>person.job,(newValue,oldValue)=>{
            console.log(&#39;person的job改变了&#39;,newValue,oldValue)
        })
        //从上边我们发现改变name,age都会触发监听，但是改变job不会
        //这是因为name和age属性的值只是一个简单的基本类型数据，
        //而job属性的值是一个对象，比较深，想要监视到，就要开启深度监视,程序如下：
        watch(()=>person.job,(newValue,oldValue)=>{
            console.log(&#39;person的job改变了&#39;,newValue,oldValue)
        },{deep:true})//此时job改变，会被监视到，此处的deep配置生效
        //需要和情况三进行区分，此处watch监视的是reactive所定义的对象中的某个属性，而情况三watch监视的是reactive所定义的对象

      //情况五：监视reactive所定义的响应式数据中的某些属性,写成数组的形式
        watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{
            console.log(&#39;person的name或age改变了&#39;,newValue,oldValue)
        })

       //返回一个对象（常用）
       return{
           sum,
           msg,
           person
       }
   }
}
</script>

watchEffect bricht die Überwachung ab

const stop1 = watch(
  [() => nameObj.name, () => nameObj.name],
  ([curName, curEng], [prevName, curEng]) => {
    console.log(curName, curEng, "----", prevName, curEng);
    setTimeout(() => {
      stop();
    }, 5000);
  });

watchEffect und berechnet

watchEffect und berechnet sind ein bisschen wie:

• Aber berechnet konzentriert sich auf den berechneten Wert (die Rendite). Wert der Callback-Funktion), daher muss der Rückgabewert geschrieben werden.

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

• computed wird nicht aufgerufen, wenn der Wert nicht verwendet wird, aber watchEffect wird immer einmal aufgerufen

Beispiel:

<template>
    <div>
        <h2>当前求和为：{{sum}}</h2>
        <button @click="sum++">点我+1</button>
        <hr>
        <h2>当前的信息为：{{msg}} </h2>
        <!-- 点击button拼接！ -->
        <button @click="msg+=&#39;!&#39;">修改数据</button>
        <hr>
        <h2>姓名：{{person.name}}</h2>
        <h2>年龄:{{person.age}}</h2>
        <h2>薪资：{{person.job.j1.salary}}</h2>
        <button @click="person.name+=&#39;~&#39;"> 修改姓名</button>
        <button @click="person.age++"> 增长年龄</button>
        <button @click="person.job.j1.salary++"> 增长薪资</button>
    </div>
</template>

<script>
import {ref,reactive,watch,watchEffect} from &#39;vue&#39;
export default {
   name:&#39;demo&#39;,
   setup(){
       //数据
       let sum = ref(0)
       let msg = ref(&#39;hello&#39;)
       let person = reactive({
           name:&#39;zhangsan&#39;,
           age:&#39;18&#39;,
           job:{
               j1:{
                   salary:20
               }
           }
       })
//watchEffect函数内部所指定的回调中用到的数据只要发生变化，就会重新执行回调
//只有一个参数，就是回调
    watchEffect(()=>{
        const x1 = sum.value//因为sum是ref定义的响应式数据，需要使用.value调用
        const x2 = person.age
        console.log(&#39;watchEffect配置的回调执行了&#39;)
    })
           return{
           sum,
           msg,
           person
       }
   }
}
</script>

Das obige ist der detaillierte Inhalt vonEin Artikel, der den Unterschied zwischen watch und watchEffect in Vue erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!