在指令绑定(bind)方法中,有一个vnode.context.$watch,并且每次将该指令添加到HTML时,它还会在以前的观察程序中添加另一个观察程序。因此,相同的观察者拨打了不止一次。

调用指令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");
    }
});

最佳答案

根据documentation$watch函数自行返回unwatch函数。您可以将返回的函数保存在vnode.context中,并在指令unbind hook中调用此函数,如下所示:

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();
    }
});

07-22 16:55