Vue如何通过浏览器控制台查看全局data值

要通过浏览器控制台查看Vue全局data值，可以依次执行以下步骤：

步骤一：打开页面并打开控制台

首先，在浏览器中打开Vue页面，然后打开开发者工具（可以通过F12快捷键或右键菜单打开）。

步骤二：选择Vue实例

在控制台中输入以下代码，获取Vue实例:

const vm = Vue.instance

步骤三：查看全局data值

有两种方法可以查看全局data值：

方法一：通过vm.$data查看

可以通过vm.$data查看实例的全局data对象，例如输入以下命令:

console.log(vm.$data)

这样就可以查看Vue实例的全局data对象。

方法二：通过vm._data查看

实际上vm.$data只是对vm._data的引用，因此我们也可以直接访问vm._data来查看全局data值。例如：

console.log(vm._data)

这样也可以查看Vue实例的全局data对象。

示例说明

可以结合以下示例来查看Vue全局data值：

<div id="app">
  <p>{{message}}</p>
</div>

const app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

当打开该页面并打开控制台后，可以通过以上步骤来查看全局data值，例如执行以下代码：

const vm = app
console.log(vm.$data)

运行后，会在控制台打印出全局data对象：

{message: "Hello, Vue!"}

这样就可以通过浏览器控制台查看Vue实例的全局data值了。