Vue에서 watch와 watchEffect의 차이점을 설명하는 기사

머리말

watch 함수와 watchEffect 함수는 모두 작성 및 사용법에 약간의 차이가 있습니다. 동일한 기능의 두 가지 다른 형태이지만 하단 레이어는 동일합니다. [관련 추천 : vue.js 영상 튜토리얼]

watch와 watchEffect의 비교

watch

• watch 종속 데이터를 명시적으로 지정하고 종속 데이터가 업데이트될 때watch显式指定依赖数据，依赖数据更新时执行回调函数
• 具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行(设置immediate: true时可以变为非惰性，页面首次加载就会执行）
• 监视ref定义的响应式数据时可以获取到原值
• 既要指明监视的属性，也要指明监视的回调

watchEffect

• watchEffect콜백 함수 실행

  어느 정도 게으른 부분이 있습니다. 페이지가 처음 표시될 때는 실행되지 않습니다. 데이터가 변경될 때만 실행됩니다(immediate를 설정하면 게으르지 않게 설정할 수 있습니다). true이며, 페이지가 처음 로드될 때 실행됩니다.)
• ref

에서 정의한 반응형 데이터를 모니터링할 때 원래 값을 얻을 수 있습니다. 모니터링되는 속성과 모니터링되는 콜백
watchEffect

• watchEffect 자동 수집 종속 데이터, 종속 데이터가 업데이트되면

  자체적으로 재실행

즉시 실행됩니다. 관성이 없습니다.

• 원래 값을 얻을 수 없고 변경된 값만 얻을 수 있습니다.

• 모니터링할 속성을 지정할 필요는 없으며, 페이지에서 어떤 속성이 사용되는지 모니터링하기만 하면 됩니다. 콜백 모니터링

watch 함수에 대한 심층 분석

watch 함수에는 두 가지 함정이 있습니다.

Reactive로 정의된 반응형 데이터 모니터링(Reactive는 응답만 정의할 수 있으므로 데이터는 객체입니다. 배열 또는 객체 유형): oldValue를 올바르게 얻을 수 없으며 심층 모니터링이 강제로 켜지고 심층 구성이 적용되지 않습니다.

Reactive로 정의된 반응형 데이터에서 특정 속성을 모니터링하고 해당 속성이 객체인 경우 심층 구성이 적용됩니다.

watch 함수의 구체적인 사용법은 다음 코드에 자세한 설명과 함께 반영됩니다.

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

watch 취소 모니터링

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

  watchEffect 함수 심층 분석

• 함수 사용법 자세한 설명과 함께 다음 코드에 표시됩니다.

  <template>
      <div>
          <h2 id="当前求和为-sum">当前求和为：{{sum}}</h2>
          <button @click="sum++">点我+1</button>
          <hr>
          <h2 id="当前的信息为-msg-nbsp">当前的信息为：{{msg}} </h2>
          <!-- 点击button拼接！ -->
          <button @click="msg+=&#39;!&#39;">修改数据</button>
          <hr>
          <h2 id="姓名-person-name">姓名：{{person.name}}</h2>
          <h2 id="年龄-person-age">年龄:{{person.age}}</h2>
          <h2 id="薪资-person-job-j-salary">薪资：{{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는 모니터링을 취소합니다

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

watchEffect와 계산

watchEffect와 계산은 약간 비슷합니다.

🎜🎜🎜그러나 계산은 계산된 값에 중점을 둡니다(반환은 콜백 함수의 값)이므로 반환 값을 작성해야 합니다. 🎜🎜🎜🎜그리고 watchEffect는 프로세스(콜백 함수의 함수 본문)에 더 많은 관심을 기울이기 때문에 반환 값을 작성할 필요가 없습니다. 🎜🎜🎜🎜computed는 값이 사용되지 않으면 호출되지 않지만 watchEffect는 항상 한 번 호출됩니다.🎜🎜🎜🎜예: 🎜

<template>
    <div>
        <h2 id="当前求和为-sum">当前求和为：{{sum}}</h2>
        <button @click="sum++">点我+1</button>
        <hr>
        <h2 id="当前的信息为-msg-nbsp">当前的信息为：{{msg}} </h2>
        <!-- 点击button拼接！ -->
        <button @click="msg+=&#39;!&#39;">修改数据</button>
        <hr>
        <h2 id="姓名-person-name">姓名：{{person.name}}</h2>
        <h2 id="年龄-person-age">年龄:{{person.age}}</h2>
        <h2 id="薪资-person-job-j-salary">薪资：{{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, computed} 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
               }
           }
       })
       let person1 = reactive({
           firstName:&#39;张&#39;,
           lastName:&#39;三&#39;
       })
       //computed
       //计算属性——简写（没有考虑计算属性被修改的情况）
       person1.fullName = computed(()=>{
           //必须含有返回值
           return person1.firstName+&#39;-&#39;+person1.lastName
       })

       //计算属性——完整写法（考虑读和写）
       person1.fullName = computed({
           //必须含有返回值
           get(){
               return person1.firstName+&#39;-&#39;+person1.lastName
           },
           set(value){
               const nameArr = value.split(&#39;-&#39;)
               person1.firstName = nameArr[0]
               person1.lastName = nameArr[1]
           }
       })
       //watchEffect
        //可以不写给返回值
        watchEffect(()=>{
            const x1 = sum.value//因为sum是ref定义的响应式数据，需要使用.value调用
            const x2 = person.age
            console.log(&#39;watchEffect配置的回调执行了&#39;)
        })
         return{
           sum,
           msg,
           person,
           person1
       }
   }
}
</script>

위 내용은 Vue에서 watch와 watchEffect의 차이점을 설명하는 기사의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!