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

Question

背景考虑以下非常基本的插件：import SomeObject from "./SomeObject";/** * Some Cool Plugin... */export default {    install(Vue){        Vue.prototype.$someObject = Vue.observable(SomeObject);    }}上面的目的是在我的应用程序中注册一个反应性的对象。问题与疑问Vue.prototype.$someObject包含某些需要watched在全局级别而不是组件级别上的属性。有没有办法在installVue 插件的方法中将观察者附加到 Vue 实例？请注意，我不是在寻找以下答案，我已经知道这是可以做到的，但它违背了将代码分成插件的意义。全局混合也不够......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) });    }}

Answer 1

在 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为你想要“观察”的属性创建一个 setter，然后把你需要的任何副作用放在 setter 中。