Dans la méthode de liaison de directive, il y a un vnode.context.$watch et chaque fois que cette directive est ajoutée au HTML, elle ajoute également un autre observateur avec l'observateur précédent. À cause de cela, les mêmes observateurs appellent plus d'une fois.

Existe-t-il un moyen de détruire l'observateur précédent lors de l'appel de la méthode unbind de directive.

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");
    }
});
5
Anik Saha 14 mars 2019 à 13:05

2 réponses

Meilleure réponse

Selon la documentation, la fonction $watch elle-même renvoie le fonction d'annulation de la surveillance. Vous pouvez enregistrer la fonction renvoyée dans vnode.context et appeler cette fonction dans la directive hook unbind comme ceci :

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();
    }
});
2
ATT 29 mars 2019 à 09:12

Je pense que tu peux déconnecter ta dépendance quand tu veux.

La documentation vm.$watch renvoie un unwatch function qui arrête de déclencher le rappel : https ://vuejs.org/v2/api/#vm-watch

var unwatch = vnode.context.$watch(dependency, function (newVal, oldVal) {
});
// later, teardown the watcher
unwatch()
0
Shim-Sao 14 mars 2019 à 10:18