追踪组件

基础知识

child::Vue 组件生命周期

方案

通过追踪引发组件更新的动作

• 如追踪事件传递

实例

jmnode.addEventListener("mouseleave", () => {
  // console.log("mouseleave");
  if (isPin.value) return;
  showPanel.value = false; //这里更新了一个响应式引用
  debugger;
});

而这个响应式引用会引起panel组件的更新

<template>
  <div id="jsmind_container"></div>
  <panel
    ref="panelRef"
    v-show="showPanel" 
    :mousePosition="mousePosition"
    :pairs="selectedPairs"
    @removePair="removePair"
    @updatePair="updatePair"
  ></panel>
</template>

• 继续追踪下去，会追踪到渲染VDOM的过程
  • 会比较繁琐，但能拿到非常多的数据，可以借此查看传入组件的参数有没有什么异常，以此来debug

通过钩子 hook打断点

实例

之一

onBeforeUpdate(() => {
  debugger;
});

拿到的数据：

之一：