目前来说网站开发主要有三种方向

1. 原生js或者jQuery
2. vue，react，angular等框架
3. WebAssembly

wasm目前除了游戏引擎打包出来之外，我还没有见到其他的应用，所以暂时不讨论。

原生js或者jQuery开发的网站

使用原生js或者jQuery开发的网站，他们的数据挂挂载方式很简单，无非就两种：

1. window上面的全局作用域
2. 不可在外部获取的函数作用域

因为开发方式比较原始，所以这种网站的大部分都没有进行源码压缩，源码中甚至可以看到对应的注释，所以分析网站暴露出来的源码比较方便，以此查找所需的数据。

Vue打包生成后的网站

今天只针对了vue打包生成后的网站进行了分析。
此处以element-ui官网为例（是在想不起来什么网站是用vue写的了）。

在分析这类网站时很简单，需要分辨目标元素是否是由vue-runtime创建的。

// 获取元素后查看是否有__vue__属性
document.querySelector("#button").__vue__;

如下图所示

以el-table为例分析具体数据

首先需要找到该组件的最外层元素（如果这个页面没有提取组件这里也可以说成是找到这个页面的最外层元素），如下图

这里其实是有两种思路的，很明显他的外层是一个父组件，而表格是子组件

1. 获取父元素的data
2. 获取表格的props

下方为具体代码实现，为了方便阅读，选择器做了一定的省略

获取父元素data

// 获取到table元素
const table = document.querySelector(".el-table");
// 获取父元素
const parentEl = table.parentNode;
// 判断父元素是否为vue构建出来的
if(parentEl.__vue__){
	// 获取data
	console.log(parentEl.__vue__._data)
}

// 或者也可以缩写为这样
document.querySelector(".el-table").parentNode?.__vue__?._data;

输出如下

如果不确定元素嵌套的层数时可以查看 __vue__.$parent进行向上查找确定最外层元素

获取子元素props

当几乎确定这个元素为组件的时候也可以尝试获取props
实现代码如下

// 获取到table元素
const table = document.querySelector(".el-table");
if(table.__vue__){
	// 获取data
	console.log(table.__vue__._props)
}

获取结果如下，如你所见，其他的属性也都是官方文档上面定义的props

附：
前端如何监听页面中所有发送请求的事件？
在单页应用中，如何优雅的监听url的变化

好了，本文章到此结束，感谢阅读！