如何在Vue插件中观看对象属性

debugcn 发表于 Dev

本·凯里

背景

考虑以下非常基本的插件：

import SomeObject from "./SomeObject";

/**
 * Some Cool Plugin...
 */
export default {
    install(Vue){

        Vue.prototype.$someObject = Vue.observable(SomeObject);

    }
}

上面的目的是在我的整个应用程序中注册一个可响应的对象。

问题与疑问

Vue.prototype.$someObject包含某些属性，这些属性需要watched在全局级别而不是组件级别。

是否可以在installVue插件的方法中将观察者附加到Vue实例？

请注意，我不是在寻找以下答案，我已经知道可以做到这一点，但是它使将代码分离到插件中变得毫无意义。全局mixin也不足够...

watch: {

    '$someObject.foo': {
        handler(value) {
            console.log(value);
        }
    }

}

我尝试过的

根据此处概述的文档，我认为我可以按照以下方式做一些事情：

export default {
    install(Vue){

        Vue.prototype.$someObject = Vue.observable(SomeObject);

        // I have tried all of the following:
        Vue.watch(Vue.prototype.$someObject.foo, value => { console.log(value) });
        Vue.$watch(Vue.prototype.$someObject.foo, value => { console.log(value) });
        Vue.prototype.watch(Vue.prototype.$someObject.foo, value => { console.log(value) });
        Vue.prototype.$watch(Vue.prototype.$someObject.foo, value => { console.log(value) });

        Vue.watch(Vue.$someObject.foo, value => { console.log(value) });
        Vue.$watch(Vue.$someObject.foo, value => { console.log(value) });
        Vue.prototype.watch(Vue.$someObject.foo, value => { console.log(value) });
        Vue.prototype.$watch(Vue.$someObject.foo, value => { console.log(value) });

    }
}

裙

在Vue 2中，仅Vue实例公开watch。当Vue 3到来时，您将有其他选择，但是现在您仍然只能使用Vue实例。

就是说，您可以在插件中拥有一个实例，因此应该很容易实现所需的目标：

import Vue from 'vue';
import SomeObject from './SomeObject';

/**
 * Some Cool Plugin...
 */
export default {
    install (Vue) {
        Vue.prototype.$someObject = Vue.observable(SomeObject);

        new Vue({
          watch: {
            '$someObject.foo' () {
              // Do something
            }
          }
        })
    }
}

此处创建的Vue实例未呈现。纯粹是为了给我们一种观察的方式$someObject。

我知道您在问题中排除了这一点，但我真的不明白为什么。也许您不是打算专门为观看目的而创建专用的Vue实例？

一种替代方法是使用属性设置器代替watch。这样的想法将Object.defineProperty用于为要“监视”的属性创建一个设置器，然后将所需的任何副作用放入设置器中。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。