vuejs2의 vnode 컨텍스트에서 감시 삭제

vuejs2의 vnode 컨텍스트에서 감시 삭제

다이렉티브바인드 방식에는vnode.context.$watch이 디렉티브가 HTML에 추가될 때마다 이전 워처와 함께 다른 워처를 추가합니다.그 때문에 같은 시청자들이 한 번 이상 전화를 걸고 있다.

directive unbind 메서드가 호출되었을 때 이전 워처를 파괴할 수 있는 방법이 있습니까?

Vue.directive("dynamic-lookup", {
    bind: function (el, binding, vnode) {        
        let dependency = setValue("dynamic-lookup-dependency");       
        if (dependency) {
            vnode.context.$watch(dependency, function (newVal, oldVal) { }); });
        }
    },
    unbind: function(el, binding, vnode) {
        console.log("unbind");
    }
});

설명서에 따르면$watchfunction it-self는 패치 해제 함수를 반환합니다.반환된 함수를 다음 위치에 저장할 수 있습니다.vnode.context이 함수를 다음과 같이 다이렉트 언바인드훅으로 호출합니다.

Vue.directive("dynamic-lookup", {
    bind: function (el, binding, vnode) {
        let unwatch = vnode.context.$watch(vnode.context.property, function (newVal, oldVal) { 
                //Do something
            }); 
        });
        if(!vnode.context['unwatch'])
            vnode.context['unwatch'] = unwatch;
    },
    unbind: function(el, binding, vnode) {
        vnode.context.unwatch();
    }
});

당신이 원할 때 당신의 의존에서 벗어날 수 있다고 생각합니다.

문서vm.$watch언패치를 반환하다function콜백 기동을 정지합니다.https://vuejs.org/v2/api/ # vm - watch

var unwatch = vnode.context.$watch(dependency, function (newVal, oldVal) {
});
// later, teardown the watcher
unwatch()

언급URL : https://stackoverflow.com/questions/55159709/destroy-watch-in-vnode-context-in-vuejs2