由Vue2初学Vue3踩坑记录(二)

67 阅读1分钟

之前在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最新的值,有两个方法:

  1. 在devtools里切换当前查看的组件,再切回来(比如我当前在看Home组件,那我切到App组件再切回来)。每次切换组件,devtools都会重新拉取响应式变量的值。
  2. 页面(视图)重新渲染,且涉及响应式变量。这种情况下,devtools也会重新拉取响应式变量的值。
    • 上面例子中页面渲染num,devtools中的msg会时刻变化。<!-- <div>{{ num }}</div> -->
    • 或者dom元素的动态类等涉及响应式变量时。<!-- <div :class='msg'>Home</div> -->
    • 但如果仅仅是向DOM中添加一个dom元素,不涉及响应式变量,则devtools中的msg不变。

方法一:切换查看的组件