如果他在单独的文件中创建，如何在 chrome 控制台中调用 Vue 实例答案

【问题标题】：How to call Vue instance in chrome console, if he created in a separated file如果他在单独的文件中创建，如何在 chrome 控制台中调用 Vue 实例
【发布时间】：2020-12-19 05:28:09
【问题描述】：

如何在 chrome 控制台中调用 Vue 实例，如果它是在一个单独的文件 new Vue({ ... }) 中创建的。赞console.log(vm.user.id)

new Vue({
  el: '#app',
  data: {
    message: {
      id: 1,
      title: 'TEST VUE'
    }
  }    
});

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

如果你安装了 Vue DevTools，它会在你点击它们时为你的 Vue 实例创建别名：

注意组件名称右侧的浅色文本。在某些屏幕上可能很难看到。

在上图中，$vm1 和$vm2 可以在控制台中访问，并将引用相应的 Vue 实例。

当您在 DevTools 中单击时，这些别名会发生变化。 $vm0 将引用您单击的最后一个组件。

【讨论】：

对于尝试 Vue3 的勇敢者，vue3 devtools 将 devtools 中选定组件的访问权限从“$vm0”更改为“$vm.proxy”

【解决方案2】：

最好的方法是使用 Vue Chrome 扩展程序as described by @skritle。如果您需要的话，您还可以获得带有花里胡哨的漂亮 UI 来查看数据、计算属性等。

但是，我不得不在没有扩展的环境中执行此操作。在这些情况下，您只需将实例添加到全局对象window（浏览器）或global（nodejs）。

const app = new Vue({...});
window.$appRef = app; // Remove this line for release

然后在浏览器中加载应用程序，您可以在控制台中访问它：

console.log($appRef)

这只能用作紧急逃生舱口，因为它会污染全局对象（可能导致名称冲突和内存泄漏），并且应该在使用后进行清理。您也可以将其包装在if condition to ensure it is used only during development

if (
    process.env.NODE_ENV !== 'production' &&
    process.env.NODE_ENV !== 'test' &&
    typeof console !== 'undefined'
){
    window.$appRef = app;
}

【讨论】：

是的，但是请问您如何访问数据？ Chrome 只是告诉我应用是代理
@Richard 抱歉，刚刚看到这个 - 您可以像在应用程序中一样访问它（使用 $appRef.somePropertyOnTheVueInstance）

【解决方案3】：

问题已经有它被接受的答案，但值得一提的是为 vue 捕获不同实例的推荐模式 - https://vuejs.org/v2/guide/instance.html#Creating-a-Vue-Instance

只需为不同的vue instances 自定义variable

// Use var to mark this variable a global, make sure it's wrapped directly to global execution context, so that you can get it at window scope
var vueInstance1 = new Vue({ 
  el: '#app1',
  data: { title: 'Vue Instance 1' }
})
var vueInstance2 = new Vue({
  el: '#app2',
  data: { title: 'Vue Instance 2' }
})

console.log('Instance 1- ', vueInstance1.title ) // Easily access to instance 1
console.log('Instance 2- ', vueInstance2.title ) // Easily access to instance 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app1">{{ title }}</div>
<div id="app2">{{ title }}</div>

【讨论】：