通过VUE管理的DOM对象进行爬取数据

最近在执行自己的爬虫脚本时候发现以前逆向的接口存在封号问题，大概看了下新版本改动是增加了很多日志event来检测我的行为是否合法，懒得再去改了，直接换真实浏览器加载页面，然后获取vue单页面的data变量数据。通过js获取有两种思路。

思路一是提取全局变量，

比如它的网站是用的nuxt，那么所有的变量都在挂载在windows下面，例如window.$nuxt，但是window.$nuxt实在太大了，去递归的时候浏览器为了性能问题跳过了。

思路二通过VUE绑定的DOM元素来查询，我们找到1个1元素绝对是VUE绑定的元素来进行测试，比如页面最小单位渲染的class，代码如下：

const element = document.querySelector('.qusetion-title'); 
if (element && element.__vue__) {
  const componentInstance = element.__vue__;
  console.log(componentInstance.$data); 
  console.log(componentInstance.$data.root.data);
} else {
  console.log('未找到对应的 Vue 组件实例。');
}

找到最小节点后可以继续向上找进行尝试，例如

const element = document.querySelector('.qusetion-title').parentElement.parentElement.parentElement

另外一种思路就是使用谷歌无头浏览器进行加载，然后监听浏览器的Fetch/XHR数据包就行，不想写代码可以直接用影刀处理。