在指令绑定(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();
}
});