Artikel yang menerangkan perbezaan antara jam tangan dan watchEffect dalam Vue

Kata Pengantar

Fungsi jam tangan dan fungsi jamEffect kedua-duanya adalah pendengar Terdapat perbezaan tertentu dalam penulisan dan penggunaan Ia adalah dua bentuk yang berbeza bagi fungsi yang sama, tetapi lapisan bawah adalah sama . [Pengesyoran berkaitan: tutorial video vue.js]

Perbandingan antara jam tangan dan watchEffect

tonton

• watchTentukan data kebergantungan secara eksplisit , bergantung pada kemas kini data, melaksanakan fungsi panggil balik
• , yang mempunyai tahap kemalasan tertentu Ia tidak akan dilaksanakan apabila halaman dipaparkan buat kali pertama, tetapi hanya akan dilaksanakan apabila data berubah (tetapan immediate: true boleh menjadi tidak malas, dan halaman akan dilaksanakan apabila ia mula-mula dimuatkan)
• Apabila memantau data responsif yang ditakrifkan oleh ref, nilai asal boleh diperolehi
• Adalah perlu untuk menentukan kedua-dua atribut yang dipantau dan Untuk menentukan panggilan balik pemantauan

watchEffect

• watchEffect secara automatik mengumpul data kebergantungan dan melaksanakan semula dirinya apabila data kebergantungan dikemas kini

• Dilaksanakan serta-merta, tanpa inersia, ia akan dilaksanakan apabila halaman dimuatkan buat kali pertama

• Nilai asal tidak boleh diperolehi, hanya nilai yang diubah boleh diperolehi Nilai

• tidak perlu menyatakan atribut mana untuk memantau. Atribut yang digunakan dalam panggilan balik pemantauan akan dipantau

Kedalaman Menghuraikan fungsi jam tangan

Fungsi jam tangan mempunyai dua masalah:

• Pantau data responsif yang ditakrifkan oleh reaktif (data ialah objek, kerana reaktif hanya boleh menentukan tatasusunan atau Apabila jenis objek responsif): oldValue tidak boleh diperoleh dengan betul, pemantauan mendalam akan dipaksa untuk dihidupkan, dan konfigurasi dalam tidak akan berkuat kuasa.

• Apabila memantau atribut tertentu dalam data responsif yang ditakrifkan oleh reaktif, dan atribut itu ialah objek, maka konfigurasi dalam akan berkuat kuasa.

Penggunaan khusus fungsi jam tangan ditunjukkan dalam kod di bawah, dengan ulasan terperinci

<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>

jam tangan membatalkan pemantauan

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

Analisis mendalam tentang fungsi watchEffect

Penggunaan fungsi ditunjukkan dalam kod berikut, dengan ulasan terperinci:

<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>

watchEffect membatalkan pemantauan

const stop = watchEffect(() => {
  console.log(nameObj.name);
  setTimeout(() => {
    stop();
  }, 5000);});

watchEffect dan dikira

watchEffect dan dikira adalah sedikit seperti:

• Tetapi dikira memfokuskan pada nilai yang dikira (Nilai pulangan fungsi panggil balik), jadi nilai pulangan mesti ditulis.

• Dan watchEffect memberi lebih perhatian kepada proses (badan fungsi fungsi panggil balik), jadi tidak perlu menulis nilai pulangan.

• dikira tidak akan dipanggil jika nilai tidak digunakan, tetapi watchEffect akan sentiasa dipanggil sekali

Contoh:

Atas ialah kandungan terperinci Artikel yang menerangkan perbezaan antara jam tangan dan watchEffect dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!