Vue.js - 如何在开发工具中显示我的 Vue 实例属性？

Question

我知道我可以像这样添加一个全局属性:Vue.prototype.$thing = { foo: 'bar' };而且我知道我可以使用以下内容更新该实例 Prop :Vue.prototype.$thing = Vue.observable({ foo: 'bar' })但是如何在开发工具中查看此属性？具体来说，如何让这个实例属性与 data 属性中定义的其他属性一起显示在数据树中？

Answer 1

Vue 的 DevTools(在 Vue 2 中)通过查找根级别的 Vue 节点(任何带有 __vue__ 附加到其原型(prototype)的 DOM 节点)并显示相关的“vm”属性来工作。基本上，除非您使用 Vue 特定的方式来连接数据，否则它不会显示出来。
看起来您可能想要向部分(或全部!)组件添加一些信息。您可以使用 plugin或与 provide/inject .
重要的
虽然您可以根据 Vue 模块上的原型(prototype)进行设置，但我真的建议使用 Vue 的内置功能来执行此操作……主要是因为您的方法在 Vue 3 中不起作用。不支持原型(prototype)由于组合 API 支持，在 Vue 3 中进行了修改。此外，原型(prototype)修改使得使用 Vue Test Utils 和 createLocalVue 进行测试变得非常困难。您需要用于组件测试的方法。
插件
插件是 VueI18n、VueRouter 和 Vuex 的工作方式。看起来像在做 Vue.use()然后将配置对象传入new Vue({}) . The docs for plugins .在 Vue 2 中，他们实际上有一个辅助的、 headless 的 Vue 实例，他们安装该实例来管理响应式数据。
我不知道您的用例是什么，但我建议使用 Vuex 来管理整个组件中的响应式数据，并且可以通过 this.$store 访问在任何组件中。 Vue Devtools 还具有用于向用户显示 Vuex 数据的特殊情况逻辑。
提供/注入(inject)
如果你不想要 Vuex，那么你可以通过 provide/inject DIY或提供者模式(这就是 vue-styled-components 在整个组件层次结构中添加其 this.$theme 对象的方式)。在 Vue Devtools 中也可以看到提供/注入(inject)数据。