집 >웹 프론트엔드 >JS 튜토리얼 >vue2.0 청취 속성 사용법 소개 및 요약

vue2.0 청취 속성 사용법 소개 및 요약

不言원래의: 2018-07-18 09:26:341847검색

작업 중 특정 속성 값의 변경 사항을 모니터링해야 하는 경우가 많습니다. 여기서는 watch 속성을 사용하는 세 가지 시나리오를 요약해 보겠습니다. :

1. 기본 버전 모니터링:

장면은 다음과 같습니다. 연령이 0~15세인 경우 입력 상자에 나이를 입력하세요. 15~25세인 경우 프롬프트 메시지는 다음과 같습니다. 귀하는 이미 10대입니다. 25세 이상이면 프롬프트 메시지는 다음과 같습니다. 성장했습니다. 모니터링 속성의 필요에 따라 다음 코드를 얻습니다.

<template>
  <p id="app">
    年齡：<input type="number" v-model="age"><br>
    提示信息：<span>{{infoMsg}}</span>
  </p>
</template>

<script>
export default {
  data() {
    return {
      age: "",
      infoMsg:""
    }
  },
  watch:{
    age:function(val,oldval){
      if(val>0 && val<15){
        this.infoMsg="你还是个小孩"
      }else if(val>15 && val<25){
        this.infoMsg="你已经是个少年"
      }else{
        this.infoMsg="你已经长大了"
      }
    }
  }
}
</script>

여기에 필요합니다 특별 설명다음은 모니터링에서 두 매개 변수의 의미입니다. attribute 메소드: 아니요. val은 모니터링 중인 속성의 값이고, oldval은 속성이 변경되기 전의 값입니다. 이는 형식 매개변수이므로 매개변수 이름은 직접 정의할 수 있지만 매개변수의 의미는 다음과 같습니다. 변경되지 않습니다.

2. 고급 버전 모니터링:

요구 사항을 변경합니다. 기본 규칙은 변경되지 않지만 백그라운드 데이터베이스의 변경으로 인해(원을 그리고 저주합니다) 이러한 데이터 구조를 제출해야 합니다

 data() {
    return {
      info: {
        age: ""
      },
      infoMsg: ""
    };
  },

객체 정보에서 속성의 age 값 변화를 모니터링하고 있으므로 심층 모니터링을 사용해야 합니다. #🎜 🎜#



<script>
export default {
  data() {
    return {
      info: {
        age: &quot;&quot;
      },
      infoMsg: &quot;&quot;
    };
  },
  watch: {
    info: {
      handler: function(val, oldval) {
        var that = this;
        if (val.age > 0 && val.age < 15) {
          that.infoMsg = "你还是个小孩";
        } else if (val.age > 15 && val.age < 25) {
          that.infoMsg = "你已经是个少年";
        } else {
          that.infoMsg = "你已经长大了";
        }
      },
      deep: true
    }
  }
};
</script>

여기서 주의할 점은 두 가지입니다. 1. 여기서 함수는 화살표 함수로 대체될 수 없습니다. 화살표 함수를 사용하는 경우 이 함수의 요점은

global 입니다. . 2. 여기에 추가된 추가 속성은 deep(심층 모니터링) 활성화 여부를 의미하며 활성화된 경우 값은 true이고, 그렇지 않으면 false입니다.

3. 가장 진보된 모니터링:

두 번째 경우에는 문제를 발견했는지 모르겠습니다. 우리가 모니터링하는 것은 특정 속성의 변화입니다. 하지만 이 개체에 값이 많으면 두 번째 방법을 사용하여 모니터링할 수도 있지만 이는 엄청난 리소스 낭비가 됩니다. 엄격한 프로그램으로서 회원님(웃음). 얼굴), 그런 일이 일어나서는 안 되므로 계산된(계산된 속성)을 결합하여 위 코드를 최적화할 수 있습니다.

<template>
  <p id="app">
    年齡：<input type="number" v-model="info.age"><br>
    提示信息：<span>{{infoMsg}}</span>
  </p>
</template>

<script>
export default {
  data() {
    return {
      info: {
        age: "",
        name: "",
        hobit: ""
      },
      infoMsg: ""
    };
  },
  computed: {
    ageval: function() {
      return this.info.age;
    }
  },
  watch: {
    ageval: {
      handler: function(val, oldval) {
        var that = this;
        if (val > 0 && val < 15) {
          that.infoMsg = "你还是个小孩";
        } else if (val > 15 && val < 25) {
          that.infoMsg = "你已经是个少年";
        } else {
          that.infoMsg = "你已经长大了";
        }
      },
      deep: true
    }
  }
};
</script>

위에서 우리가 모니터링하는 이번에는 계산된 속성 ageval, 계산된 속성은 info 개체의 age 값을 반환합니다. 두 번째 코드와 비교하면 모니터링되는 두 코드 중 하나는 개체 info이고 다른 하나는 info의 age 값임을 알 수 있습니다. object.를 사용하면 성능이 크게 향상됩니다. 이것이 바로 우리가 기대하는 결과입니다.

vue2.0 청취 속성 사용법 소개 및 요약

1. 기본 버전 모니터링:

2. 고급 버전 모니터링:

관련 기사