在浏览器控制台打印Vue组件

515 阅读1分钟

1. 发布环境 __vue__

console.dir() 是一种在控制台中查看指定 JavaScript 对象的所有属性的方法

Vue项目运行后会把各个组件的数据挂载到对应的dom上,例如 根组件(#app)上获取实例

console.dir(document.querySelector('#app').__vue__)

image.png

1.1 复制页面元素

image.png

1.2 打印页面元素的__vue__属性

image.png

image.png

2. 开发环境 __VUE_HOT_MAP____vue__

2.1 Vue组件的data-v-xxx属性

当 <style> 标签有 scoped 属性时,它的 CSS 只作用于当前组件中的元素。编译时将生成data-v-xxx属性,如下的“data-v-469af010”就是因为加了scoped

image.png

2.2 __VUE_HOT_MAP__获取所有组件

image.png

上边的469af010就是每个Vue组件的独有的data-v-xxx属性

2.3 开发环境也支持__vue__

image.png