Javascript 如何使用Vue组件控制类实例属性的状态？

我使用的第三方库使用具有getter/setter属性的类实例，我希望使用VueJS组件控制这些属性。我不应该直接将实例作为组件状态使用（Evan You说它是“”），但是如果我必须编写自己的中间代码来将组件状态映射到类状态，那么反应式数据绑定首先有什么意义呢

例如：

//Toggle.js
var Toggle=Vue.component（“Toggle”{
模板：“单击我！”，
道具：[“可见”]
});
//第三方图书馆
var Widget=function（）{
这是真的；
}
Widget.prototype={
get visible（）{返回此。_visible；}，
设置可见（v）{this.\u visible=v；}
}
//app.js
var widgets=[new Widget（），new Widget（），new Widget（）]；
var v=新的Vue({
el:“内容”，
模板：“”，
数据：{widgets}，
组件：{Toggle}
});

查看我对原始问题的更新答案。我搞错了。我还是想要一些关于使用模式的指导。我在上面简化了一些内容，但它与我试图完成的内容非常接近——组件应该是绑定到大型复杂对象的属性（用getter/setter定义）的输入，而不必观察该对象的每个方面。这似乎应该是一个共同的需要，但我找不到一个单独的教程，这样做。这是你的小部件工作。我对原始问题进行了评论，您的示例非常有用，但我仍然需要一种方法来避免观察对象的各个方面——您的链接解决方案非常好，但我相信它确实会导致Vue对
设置的任何更改作出反应。对于本项目的其他部分，我需要处理这样一种情况，即我需要对大型复杂对象的一个属性的变化做出反应，而这种变化的观察成本很高。我可以根据你的例子想出一些变通办法，但它们都是黑客；感觉这只是Vue的一部分，我没有完全理解。请参阅我对原始问题的更新答案。我搞错了。我还是想要一些关于使用模式的指导。我在上面简化了一些内容，但它与我试图完成的内容非常接近——组件应该是绑定到大型复杂对象的属性（用getter/setter定义）的输入，而不必观察该对象的每个方面。这似乎应该是一个共同的需要，但我找不到一个单独的教程，这样做。这是你的小部件工作。我对原始问题进行了评论，您的示例非常有用，但我仍然需要一种方法来避免观察对象的各个方面——您的链接解决方案非常好，但我相信它确实会导致Vue对
设置的任何更改作出反应。对于本项目的其他部分，我需要处理这样一种情况，即我需要对大型复杂对象的一个属性的变化做出反应，而这种变化的观察成本很高。我可以根据你的例子想出一些变通办法，但它们都是黑客；感觉这只是Vue的一部分，我不完全喜欢。