Vuejs2: 감시자를 어떻게 파괴할 수 있을까?

Vuejs2: 감시자를 어떻게 파괴할 수 있을까?

어떻게 하면 이 감시자를 파괴할 수 있을까?비동기 데이터가 상위 구성 요소에서 로드된 경우 자식 구성 요소에 한 번만 있으면 된다.

export default {
    ...
    watch: {
        data: function(){
            this.sortBy();
        },
    },
    ...
}

그레고르;)

VM을 호출하여 동적으로 Watcher를 구성하는 경우$watch 함수, 나중에 호출할 수 있는 함수를 반환하여 특정 감시자를 비활성화(제거)한다.

코드와 같이 감시자를 정적으로 구성 요소에 넣지 말고 다음과 같은 작업을 수행하십시오.

created() {
   var unwatch = this.$watch(....)
   // now the watcher is watching and you can disable it
   // by calling unwatch() somewhere else; 
   // you can store the unwatch function to a variable in the data
   // or whatever suits you best 
} 

자세한 설명은 https://codingexplained.com/coding/front-end/vue-js/adding-removing-watchers-dynamically에서 확인할 수 있다.

예를 들면 다음과 같다.

<script>
export default {
  data() {
    return {
      employee: {
        teams: []
      },
      employeeTeamsWatcher: null,
    };
  },

  created() {
    this.employeeTeamsWatcher = this.$watch('employee.teams', (newVal, oldVal) => {
      this.setActiveTeamTabName();
    });
  },

  methods: {
    setActiveTeamTabName() {
      if (this.employee.teams.length) {
        // once you got your desired condition satisfied then unwatch by calling:
        this.employeeTeamsWatcher();
      }
    },
  },
};
</script>

사용 중인 경우vue2을 이용하여composition-api플러그인 또는vue3, 사용할 수 있다.WatchStopHandle에 의해 반환되는.watch예:

    const x = ref(0);

    setInterval(() => {
      x.value++;
    }, 1000);

    const unwatch = watch(
      () => x.value,
      () => {
        console.log(x.value);
        x.value++;

        // stop watch:
        if (x.value > 3) unwatch();
      }
    );

이런 것에 대해서는 종래의 유형선언을 조사하면 된다.API, 매우 도움이 되는, 마우스를 그 위에 올려놓기만 하면, 그것은 여러분이 무엇을 할 수 있는지에 대한 힌트를 보여줄 것이다.

참조URL: https://stackoverflow.com/questions/46987893/vuejs2-how-can-i-destroy-a-watcher