vue watch의 사용법은 무엇입니까?

vue watch의 사용법은 다음과 같습니다. 1. fullName 값이 변경되면 watch가 이를 모니터링하고 실행합니다. 2. Watch는 핸들러 메서드와 즉시 속성을 실행합니다. 3. deep 속성을 사용하여 공통적으로 아래 속성을 변경합니다. 사용된 개체입니다.

권장 관련 기사 : vue.js

】

vue watch usage는 다음과 같습니다. . 핸들러 메서드 및 즉시 속성

위의 예는 값이 변경될 때만 시계가 실행된다는 것입니다.

속성 handler和immediate

<div>
      <p>FullName: {{fullName}}</p>
      <p>FirstName: <input type="text" v-model="firstName"></p>
</div>
 
new Vue({
  el: &#39;#root&#39;,
  data: {
    firstName: &#39;Dawei&#39;,
    lastName: &#39;Lou&#39;,
    fullName: &#39;&#39;
  },
  watch: {
    firstName(newName, oldName) {
      this.fullName = newName + &#39; &#39; + this.lastName;
    }
  } 
})

3. 깊은 속성(깊은 모니터링, 객체 속성 변경에서 흔히 사용됨)

watch: {
  firstName: {
    handler(newName, oldName) {
      this.fullName = newName + ' ' + this.lastName;
    },
    // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法，如果设置了false，那么效果和上边例子一样
    immediate: true
  }
}

obj.a의 값을 변경하기 위해 입력 상자에 데이터 뷰에 들어 갔을 때 유효하지 않은 것으로 나타났습니다. 최신 JavaScript의 제한(및 Object.observe의 지원 중단)으로 인해 Vue는 객체 속성의 추가 또는 제거를 감지할 수 없습니다. Vue는 인스턴스를 초기화할 때 속성에 대해 getter/setter 변환 프로세스를 수행하므로 Vue가 응답할 수 있도록 변환하려면 속성이 데이터 객체에 존재해야 합니다.

기본적으로 핸들러는 obj 속성 참조의 변경 사항만 수신합니다. 예를 들어 마운트된 이벤트 후크 함수에서 obj를 다시 할당합니다.

<div>
      <p>obj.a: {{obj.a}}</p>
      <p>obj.a: <input type="text" v-model="obj.a"></p>
</div>
 
new Vue({
  el: &#39;#root&#39;,
  data: {
    obj: {
      a: 123
    }
  },
  watch: {
    obj: {
      handler(newName, oldName) {
         console.log(&#39;obj.a changed&#39;);
      },
      immediate: true
    }
  } 
})

그런 다음 필요합니다. obj에서 속성 a의 값을 모니터링하는 것은 어떻습니까? 이때 deep 속성이 유용하게 사용됩니다.

mounted: {
  this.obj = {
    a: '456'
  }
}

이 방법은 성능에 큰 영향을 미칩니다. obj의 속성을 수정하면 리스너에서 핸들러가 트리거됩니다. 다음과 같은 처리를 할 수 있습니다:

watch: {
  obj: {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    deep: true
  }
}

여기서는 시계 로그아웃에 대해 자세히 설명하지 않겠습니다. 실제 개발에서는 시계가 구성 요소와 함께 파괴됩니다.

관련 무료 학습 권장 사항:

javascript(동영상)

위 내용은 vue watch의 사용법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!