Javascript 如何在chrome控制台中调用Vue实例（如果他在单独的文件中创建）

如何在chrome控制台中调用Vue实例，如果它是在一个单独的文件中创建的

新Vue（{…}）

。比如

console.log（vm.user.id）

newvue({
el:“#应用程序”，
数据：{
信息：{
id:1，
标题：“测试VUE”
}
}    
});如果已安装Vue DevTools，则当您单击Vue实例时，它将为它们创建别名：


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

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

在DevTools中单击时，这些别名将更改<代码>$vm0

将引用您单击的最后一个组件。

如果您安装了Vue DevTools，当您单击它们时，它将为您的Vue实例创建别名：

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

在上图中，

$vm1

和

$vm2

可在控制台中访问，并将引用相应的Vue实例

---

在DevTools中单击时，这些别名将更改<代码>$vm0将引用您单击的最后一个组件。

执行此操作的最佳方法是使用Vue Chrome扩展。如果您需要的话，您还可以获得一个漂亮的用户界面，可以查看数据、计算属性等

然而，我不得不在没有扩展的环境中这样做。在这些场景中，只需将实例添加到全局对象

窗口
（浏览器）或
全局
（nodejs）

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

console.log($appRef)

这只能用作紧急逃生舱口，因为它会污染全局对象（可能导致名称冲突和内存泄漏），使用后应进行清理。你也可以把它包起来

最好的方法是使用Vue Chrome扩展。如果您需要的话，您还可以获得一个漂亮的用户界面，可以查看数据、计算属性等

然而，我不得不在没有扩展的环境中这样做。在这些场景中，只需将实例添加到全局对象
窗口
（浏览器）或
全局
（nodejs）

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

console.log($appRef)

这只能用作紧急逃生舱口，因为它会污染全局对象（可能导致名称冲突和内存泄漏），使用后应进行清理。你也可以把它包起来

这个问题已经有了公认的答案，但值得一提的是为vue捕获不同实例的推荐模式-

只需为不同的
vue实例创建自己的自定义
变量


//使用var将此变量标记为全局变量，确保它直接包装到全局执行上下文，以便在窗口范围内获取它
var vueInstance1=新的Vue（{
el:'附录1'，
数据：{title:'Vue实例1'}
})
var vueInstance2=新的Vue({
el:'附录2'，
数据：{title:'Vue实例2'}
})
console.log（'Instance 1-'，vueInstance1.title）//轻松访问实例1
console.log（'Instance 2-'，vueInstance2.title）//轻松访问实例2

{{title}}
{{title}
问题已经有了公认的答案，但值得一提的是，为vue捕获不同实例的推荐模式-

只需为不同的
vue实例创建自己的自定义
变量


//使用var将此变量标记为全局变量，确保它直接包装到全局执行上下文，以便在窗口范围内获取它
var vueInstance1=新的Vue（{
el:'附录1'，
数据：{title:'Vue实例1'}
})
var vueInstance2=新的Vue({
el:'附录2'，
数据：{title:'Vue实例2'}
})
console.log（'Instance 1-'，vueInstance1.title）//轻松访问实例1
console.log（'Instance 2-'，vueInstance2.title）//轻松访问实例2

{{title}}
{{title}}
是的，那么您如何访问数据呢？Chrome只是告诉我这个应用程序是proxyYes，但是你怎么访问数据呢？Chrome只是告诉我应用程序是一个代理
if (
    process.env.NODE_ENV !== 'production' &&
    process.env.NODE_ENV !== 'test' &&
    typeof console !== 'undefined'
){
    window.$appRef = app;
}