Vue 检测更新来源

Question

我现在有一SVG编辑器组件Editor，标记为可编辑元素的组件edit-component。
这套组件，通过以下组合方式使用

  <editor>
    <edit-component />
    <edit-component />
    <edit-component />
  </editor>

在editor的内部，会通过分析this.$slots.default ，来建立对应的编辑区，
对应到实际dom，大概样子如下

  <editor>
    <g>
      <edit-component />
      <rect fill="transparent" onClick={this.startEdit} />
    </g>
    <g>
      <edit-component />
      <rect fill="transparent" onClick={this.startEdit} />
    </g>
    <g>
      <edit-component />
      <rect fill="transparent" onClick={this.startEdit} />
    </g>

    <handler-shape />
  </editor>

当点击rect后，editor的data会记录一个正在进行编辑的组件的几何状态（宽高边距），
并且在</editor>结束标签前渲染一个handler-shape组件来作为调整手柄，
当用户调整手柄的时候，我会在render方法里，
调整来自this.$slots.default的VNode对应的attrs做到几何属性的关联

调整手柄的时候，这时改变元素几何状态的是来自组件内部的方法调用，
但现在还有一个需求，这个几何状态，也有可能是来自外部。

因为当我选中一个edit-component的时候，
会显示一个面板，里边有多个input来展示这个组件的几何信息。

用户除了拖动手柄，还可以通过输入数值来改变这个组件。
意味着组件的外可以通过更改传入的this.$slots.default来更新对应的正在编辑中的handler-shape

现在问题来了，一个组件，既可以通过内部改变他的data，又可以通过外部this.$slots.default的变化改变他的data，
那我有什么办法，来识别触发data更新的来源是哪里的呢？

Answer 1

问题已解决。外部的更新，基本上就是触发组件的props，mounted()，beforeDestroy()，通过对这三个东西进行监控，再通过父组件提前定义好的一个方法 this.$parent.func() 通知父组件更新它的data即可。

Answer 2

既然是外部传给内部的，那么内部就不要去改变它，不然你就违背了它的初衷

Answer 3

按照你说的需求，内部不要直接更改，而是emit一个事件让外部去更改