之前在Vue2项目中,项目运行时想要看看data选项里的变量,我会这么做:
假设我要看Home.vue组件中data选项里的msg变量,我会在mounted中给全局window对象添加一个自定义属性,指向当前组件:
data() {
return {
msg: 'Hello'
}
}
mounted() {
window.home = this;
}
运行时我在控制台直接打印home.msg
即可得到msg的值。
但是在vue3中我发现这么干不行了,现在好像只能看vue devtools了。然后我就发现一个关于vue devtools的坑:
假设你在当前组件里定义了一个响应式变量msg,当msg变化时,devtools里msg的值不一定变化:
<template>
<div>Home</div>
<!-- <div :class='msg'>Home</div> -->
<!-- <div>{{ num }}</div> -->
<button
onclick="const h1 = document.createElement('h1');
h1.innerHTML = 'Test';
document.body.appendChild(h1);">
AddSth</button>
</template>
<script setup>
import { ref } from 'vue';
const msg = ref(0);
const num = ref(0);
setInterval(() => {
msg.value++;
num.value++;
}, 1000)
</script>
就像上面这个组件,msg变量每秒都会变化,但是devtools里msg的值不会变化,要想看到msg最新的值,有两个方法:
- 在devtools里切换当前查看的组件,再切回来(比如我当前在看Home组件,那我切到App组件再切回来)。每次切换组件,devtools都会重新拉取响应式变量的值。
- 页面(视图)重新渲染,且涉及响应式变量。这种情况下,devtools也会重新拉取响应式变量的值。
- 上面例子中页面渲染num,devtools中的msg会时刻变化。
<!-- <div>{{ num }}</div> -->
- 或者dom元素的动态类等涉及响应式变量时。
<!-- <div :class='msg'>Home</div> -->
- 但如果仅仅是向DOM中添加一个dom元素,不涉及响应式变量,则devtools中的msg不变。
- 上面例子中页面渲染num,devtools中的msg会时刻变化。