5

在指令绑定方法中,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");
    }
});
4

2 回答 2

3

根据文档$watch函数本身返回 unwatch 函数。您可以保存返回的函数vnode.context并在指令 unbind 钩子中调用此函数,如下所示:

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();
    }
});
于 2019-03-29T09:12:22.843 回答
0

我认为您可以在需要时取消关注您的依赖。

文档vm.$watch返回一个function停止触发回调的 unwatch:https ://vuejs.org/v2/api/#vm-watch

var unwatch = vnode.context.$watch(dependency, function (newVal, oldVal) {
});
// later, teardown the watcher
unwatch()
于 2019-03-14T10:18:28.260 回答