前端推荐！10分钟带你了解Konva运行原理-技术圈

导语 | Konva是一个很优秀的Canvas框架，API封装简洁易懂，基于TypeScript实现，有React和Vue版本。本文总结梳理了Konva的架构设计、原理及其缺点，希望可以为大家了解KonvaJS的相关问题提供一些参考。

一、前言

用过Canvas的都知道它的API比较多，使用起来也很麻烦，比如我想绘制一个圆形就要调一堆API，对开发算不上友好。

const canvas = document.querySelector('canvas');const context = canvas.getContext('2d');// 设置字体样式context.font = '24px SimSun, Songti SC';context.fillText('24px的宋体呈现', 20, 50);// 绘制完整圆context.fillStyle = 'RGB(255, 0, 0)';context.beginPath();context.arc(150, 75, 50, 0, Math.PI * 2);context.stroke();

为了解决这个痛点，诞生了例如PIXI、ZRender、Fabric等Canvas库。今天要讲的Konva也是一个很优秀的Canvas框架，API封装简洁易懂，基于TypeScript实现，有React和Vue版本。

      const stage = new Konva.Stage({        container: 'root',        width: 1000,        height: 1000,      });      const layer = new Konva.Layer();      const group = new Konva.Group();            const text = new Konva.Text({        text: 'Hello, this is some good text',        fontSize: 30,      });
      const circle = new Konva.Circle({        x: stage.width() / 2,        y: stage.height() / 2,        radius: 70,        fill: 'red',        stroke: 'black',        strokeWidth: 4      });      group.add(text);      group.add(circle);      layer.add(group);      stage.add(layer);

二、架构设计

（一）Konva Tree

从前言里面给的那段代码可以看出来，Konva有一定的嵌套结构，有些类似DOM结构。通过add和remove就能实现子节点的添加和删除。

Konva Tree主要包括这么四部分：

Stage根节点：这是应用的根节点，会创建一个div节点，作为事件的接收层，根据事件触发时的坐标来分发出去。一个Stage节点可以包含多个Layer图层。
Layer图层：Layer里面会创建一个Canvas节点，主要作用就是绘制Canvas里面的元素。一个Layer可以包含多个Group和Shape。
Group组：Group包含多个Shape，如果对其进行变换和滤镜，里面所有的Shape都会生效。
Shape：指Text、Rect、Circle等图形，这些是Konva封装好的类。

（二）build dom

Stage创建的时候会去创建两个Canvas节点以及content容器节点，这两个Canvas节点是用于perfectDrawEnabled的，后面会讲到。

这里需要注意的就是这个content节点，作为整个Konva画布的容器，之后的Layer都会被append进去。

  _buildDOM() {    this.bufferCanvas = new SceneCanvas({      width: this.width(),      height: this.height(),    });    this.bufferHitCanvas = new HitCanvas({      pixelRatio: 1,      width: this.width(),      height: this.height(),    });
    if (!Konva.isBrowser) {      return;    }    var container = this.container();    if (!container) {      throw 'Stage has no container. A container is required.';    }    // clear content inside container    container.innerHTML = '';
    // content    this.content = document.createElement('div');    this.content.style.position = 'relative';    this.content.style.userSelect = 'none';    this.content.className = 'konvajs-content';
    this.content.setAttribute('role', 'presentation');
    container.appendChild(this.content);
    this._resizeDOM();  }

在调用Stage.add的时候，不仅会调用Layer的绘制方法，还会把Layer的Canvas节点append进去。

  add(layer: Layer, ...rest) {    if (arguments.length > 1) {      for (var i = 0; i < arguments.length; i++) {        this.add(arguments[i]);      }      return this;    }    super.add(layer);
    var length = this.children.length;    if (length > MAX_LAYERS_NUMBER) {      Util.warn(        'The stage has ' +          length +          ' layers. Recommended maximum number of layers is 3-5. Adding more layers into the stage may drop the performance. Rethink your tree structure, you can use Konva.Group.'      );    }    layer.setSize({ width: this.width(), height: this.height() });
    // draw layer and append canvas to container    layer.draw();
    if (Konva.isBrowser) {      this.content.appendChild(layer.canvas._canvas);    }
    // chainable    return this;  }

三、渲染

（一）批量渲染

从前面的代码中可以看到，没有手动调用绘制方法，但依然会进行绘制，说明会在一定的时机进行渲染。这个时机就在add方法里面，不管Group、Layer、Stage哪个先add，最终都会触发渲染。

他们三个都继承了Container类，在Container类里面有一个add方法，我们来一探究竟。

  add(...children: ChildType[]) {    if (arguments.length > 1) {      for (var i = 0; i < arguments.length; i++) {        this.add(arguments[i]);      }      return this;    }    var child = children[0];    // 如果要添加的子节点已经有个父节点，那就先将其从父节点移除，再插入到当前节点里面    if (child.getParent()) {      child.moveTo(this);      return this;    }    this._validateAdd(child);    // 设置子节点的 index 和 parent    child.index = this.getChildren().length;    child.parent = this;    child._clearCaches();    this.getChildren().push(child);    this._fire('add', {      child: child,    });    // 请求绘制    this._requestDraw();    return this;  }

除了一些常规的处理之外，渲染的关键就在_requestDraw方法里面。这里调用了Layer上面的batchDraw进行批量重绘。

  _requestDraw() {    if (Konva.autoDrawEnabled) {      const drawNode = this.getLayer() || this.getStage();      drawNode?.batchDraw();    }  }

这个批量重绘的原理是利用requestAnimationFrame方法将要绘制的内容放到下一帧来绘制。这样同时修改多个图形多个属性就不需要反复绘制了。

  batchDraw() {    // _waitingForDraw 保证只会执行一次 requestAnimFrame    if (!this._waitingForDraw) {      this._waitingForDraw = true;      // 如果调用多次方法修改 Shape 属性，这里就会批量绘制      // 避免了多次绘制带来的开销      Util.requestAnimFrame(() => {        this.draw();        this._waitingForDraw = false;      });    }    return this;  }

（二）Shape绘制

所有涉及到图形绘制的地方都是调用Shape实现类上的_sceneFunc方法，以Circle为例：

  _sceneFunc(context) {    context.beginPath();    context.arc(0, 0, this.attrs.radius || 0, 0, Math.PI * 2, false);    context.closePath();    context.fillStrokeShape(this);  }

在Shape和Node两个基类上面只负责调用，具体的实现放到具体的Shape实现上面。这样带来两个好处，一个是可以实现自定义图形，另一个是以后要是支持SVG、WebGL会很方便。

（三）离屏渲染

什么是离屏渲染？就是在屏幕之外预渲染一个Canvas，之后通过drawImage的形式将其绘制到屏幕要显示的Canvas上面，对形状相似或者重复的对象绘制性能提升非常高。

假设我们有个列表页，每次滚动的时候全部重新绘制开销会比较大。但如果我们实现一个Canvas池，把已经绘制过的列表项存起来。下次滚动到这里的时候，就可以直接从Canvas池里面取出来drawImage到页面上了。

在Node类上面有个cache方法，这个方法可以实现细粒度的离屏渲染。cache方法内部会创建三个Canvas，分别是：

cachedSceneCanvas：用于绘制图形的Canvas的离屏渲染。

cachedFilterCanvas：用于处理滤镜效果。

cachedHitCanvas：用于处理hitCanvas的离屏渲染。

  _drawCachedSceneCanvas(context: Context) {    context.save();    context._applyOpacity(this);    context._applyGlobalCompositeOperation(this);    // 获取离屏的 Canvas    const canvasCache = this._getCanvasCache();    context.translate(canvasCache.x, canvasCache.y);
    var cacheCanvas = this._getCachedSceneCanvas();    var ratio = cacheCanvas.pixelRatio;    // 将离屏 Canvas 绘制到要展示的 Canvas 上面    context.drawImage(      cacheCanvas._canvas,      0,      0,      cacheCanvas.width / ratio,      cacheCanvas.height / ratio    );    context.restore();  }

（四）perfectDrawEnabled

Canvas在绘制stroke和fill的时候，如果遇到透明度的时候，stroke会和fill的一部分重合到一起，就不符合我们的预期了。

比如下面这段代码：

      const canvas = document.getElementById("canvas");      const bufferCanvas = document.createElement("canvas");      const bufferCtx = bufferCanvas.getContext("2d");      const ctx = canvas.getContext("2d");
      ctx.strokeStyle="green";      ctx.lineWidth=10;      ctx.strokeRect(30,30,50,50);      ctx.globalAlpha = 0.5;      ctx.fillStyle="RGB(255, 0, 0)";      ctx.fillRect(30,30,50,50);

它的实际展示效果是这样的，中间的stroke和fill有一部分重叠。

在这种情况下，KonvaJS实现了一个perfectDrawEnabled功能，它会这样做：

在 bufferCanvas上绘制Shape

绘制fill和stroke

在layer上应用透明度

将bufferCanvas绘制到sceneCanvas上面

可以看到开启perfectDrawEnabled和关闭perfectDrawEnabled的区别很明显：

它会在Stage里面创建一个bufferCanvas和bufferHitCanvas，前者就是针对sceneCanvas的，后者是针对hitCanvas的。

在Shape的drawScene方法里面，会判断是否使用bufferCanvas：

    // if buffer canvas is needed    if (this._useBufferCanvas() && !skipBuffer) {      stage = this.getStage();      bufferCanvas = stage.bufferCanvas;      bufferContext = bufferCanvas.getContext();      bufferContext.clear();      bufferContext.save();      bufferContext._applyLineJoin(this);      // layer might be undefined if we are using cache before adding to layer      var o = this.getAbsoluteTransform(top).getMatrix();      bufferContext.transform(o[0], o[1], o[2], o[3], o[4], o[5]);            // 在 bufferCanvas 绘制 fill 和 stroke      drawFunc.call(this, bufferContext, this);      bufferContext.restore();
      var ratio = bufferCanvas.pixelRatio;
      if (hasShadow) {        context._applyShadow(this);      }      // 在 sceneCanvas 应用透明度      context._applyOpacity(this);      context._applyGlobalCompositeOperation(this);      // 将 bufferCanvas 绘制到 sceneCanvas      context.drawImage(        bufferCanvas._canvas,        0,        0,        bufferCanvas.width / ratio,        bufferCanvas.height / ratio      );    }

四、事件

Konva里面的事件是在Canvas外层创建了一个div节点，在这个节点上面接收了DOM事件，再根据坐标点来判断当前点击的是哪个Shape，然后进行事件分发。

所以关键就在如何判断当前点击的Shape是哪个？相比ZRender里面比较复杂的计算，Konva使用了一个相当巧妙的方式。

（一）事件分发

Konva目前支持下面这么多事件，EVENTS是事件名-事件处理方法的映射。

EVENTS = [    [MOUSEENTER, '_pointerenter'],    [MOUSEDOWN, '_pointerdown'],    [MOUSEMOVE, '_pointermove'],    [MOUSEUP, '_pointerup'],    [MOUSELEAVE, '_pointerleave'],    [TOUCHSTART, '_pointerdown'],    [TOUCHMOVE, '_pointermove'],    [TOUCHEND, '_pointerup'],    [TOUCHCANCEL, '_pointercancel'],    [MOUSEOVER, '_pointerover'],    [WHEEL, '_wheel'],    [CONTEXTMENU, '_contextmenu'],    [POINTERDOWN, '_pointerdown'],    [POINTERMOVE, '_pointermove'],    [POINTERUP, '_pointerup'],    [POINTERCANCEL, '_pointercancel'],    [LOSTPOINTERCAPTURE, '_lostpointercapture'],  ];  // 绑定事件  _bindContentEvents() {    if (!Konva.isBrowser) {      return;    }    EVENTS.forEach(([event, methodName]) => {      // 事件绑定在 content 这个 dom 节点上面      this.content.addEventListener(event, (evt) => {        this[methodName](evt);      });    });  }

我们以mousedown这个具体的事件作为例子来分析，它的处理方法在_pointerdown里面。_pointerdown先执行setPointersPositions，计算当前鼠标点击的坐标，减去content相对页面的坐标，得到了当前点击相对于content的坐标。同时将其存入了_changedPointerPositions 里面。

然后遍历_changedPointerPositions，通过getIntersection获取到了点击的Shape图形。这个getIntersection遍历调用了每个Layer的getIntersection方法，通过Layer获取到了对应的Shape。

因为可以存在多个Layer，每个Layer也可以在同一个位置绘制多个Shape，所以理论上可以获取到多个Shape，Konva这里只取了第一个Shape，按照Layer->Shape的顺序来的。

然后Stage会调用Shape上面的_fireAndBubble方法，这个方法调用_fire发送Konva自己的事件，此时通过on绑定的事件回调就会触发，有点儿像jQuery那样。

然后Konva会继续往上找到父节点，继续调用父节点的_fireAndBubble方法，直到再也找不到父节点为止，这样就实现了事件冒泡。

对于不想被点击到的Shape来说，可以设置isListening属性为false，这样事件就不会触发了。

（二）匹配Shape

那么Layer是怎么根据点击坐标获取到对应的Shape呢？如果是规则的图形（矩形、圆形）还比较容易计算，要是下面这种不规则图形呢？

众所周知，在Canvas里面有个getImageData方法，它会根据传入的坐标来返回一个ImageData信息，里面有当前坐标对应的色值。那么我们能不能根据这个色值来获取到对应的Shape呢？

canvas = new SceneCanvas();hitCanvas = new HitCanvas({  pixelRatio: 1,});

  constructor(config?: Config) {    super(config);    // set colorKey    let key: string;
    while (true) {      // 生成随机色值      key = Util.getRandomColor();      if (key && !(key in shapes)) {        break;      }    }    this.colorKey = key;    // 存入 shapes 数组    shapes[key] = this;  }

每次在sceneCanvas上面绘制的时候，同样会在内存中的hitCanvas里面绘制一遍，并且将上面随机生成的色值作为fill和stroke的颜色填充。

当点击sceneCanvas的时候，获取到点击的坐标点，通过调用hitCanvas 的getImageData就可以获取到colorKey，然后再通过colorKey就能找到对应的Shape了，真是相当巧妙的实现。

  drawHit(can?: HitCanvas, top?: Node, skipDragCheck = false) {    if (!this.shouldDrawHit(top, skipDragCheck)) {      return this;    }
    var layer = this.getLayer(),      canvas = can || layer.hitCanvas,      context = canvas && canvas.getContext(),      // 如果有 hitFunc，就不使用 sceneFunc      drawFunc = this.hitFunc() || this.sceneFunc(),      cachedCanvas = this._getCanvasCache(),      cachedHitCanvas = cachedCanvas && cachedCanvas.hit;
    if (!this.colorKey) {      Util.warn(        'Looks like your canvas has a destroyed shape in it. Do not reuse shape after you destroyed it. If you want to reuse shape you should call remove() instead of destroy()'      );    }    // ...    drawFunc.call(this, context, this);    // ...}

（三）拖拽事件

Konva的拖拽事件没有使用原生的方法，而是基于mousemove和touchmove来计算移动的距离，进而手动设置Shape的位置，实现逻辑比较简单，这里不细说。

五、滤镜

Konva支持多种滤镜，在使用滤镜之前需要先将Shape cache起来，然后使用filter() 方法添加滤镜。在cache里面除了创建用于离屏渲染的Canvas，还会创建滤镜Canvas。滤镜处理在_getCachedSceneCanvas里面。

首先将sceneCanvas通过drawImage绘制到filterCanvas上面，接着filterCanvas获取所有的ImageData，遍历所有设置的滤镜方法，将ImageData传给滤镜方法来处理。

处理完ImageData之后，再将其通过putImageData绘制到filterCanvas上面。

    if (filters) {      if (!this._filterUpToDate) {        var ratio = sceneCanvas.pixelRatio;        filterCanvas.setSize(          sceneCanvas.width / sceneCanvas.pixelRatio,          sceneCanvas.height / sceneCanvas.pixelRatio        );        try {          len = filters.length;          filterContext.clear();
          // copy cached canvas onto filter context          filterContext.drawImage(            sceneCanvas._canvas,            0,            0,            sceneCanvas.getWidth() / ratio,            sceneCanvas.getHeight() / ratio          );          imageData = filterContext.getImageData(            0,            0,            filterCanvas.getWidth(),            filterCanvas.getHeight()          );
          // apply filters to filter context          for (n = 0; n < len; n++) {            filter = filters[n];            if (typeof filter !== 'function') {              Util.error(                'Filter should be type of function, but got ' +                  typeof filter +                  ' instead. Please check correct filters'              );              continue;            }            filter.call(this, imageData);            filterContext.putImageData(imageData, 0, 0);          }        } catch (e) {          Util.error(            'Unable to apply filter. ' +              e.message +              ' This post my help you https://konvajs.org/docs/posts/Tainted_Canvas.html.'          );        }
        this._filterUpToDate = true;      }
      return filterCanvas;    }

那滤镜效果怎么画上去的呢？在konva里面进行了特殊处理，如果存在filterCanvas，那就不会使用cacheCanvas了，也就是我们原本用于缓存的离屏Canvas会被filterCanvas进行替代。

最终filterCanvas会通过drawImage的方式绘制到sceneCanvas上面。

六、选择器

Konva实现了选择器，方便我们快速查找到某个Shape。目前主要有三种选择器，分别是id选择器、name选择器、type选择器。

前两者需要在实例化的时候传入一个id或者name属性，后者则是根据类名（Rect、Line等）来查找的。

选择器查找的时候需要调用find方法，这个find方法挂载在Container 类上面。它调用了_descendants进行子节点的遍历，将遍历的node节点调用isMatch方法来判断是否匹配上。

  _generalFind(    selector: string | Function,    findOne: boolean  ) {    var retArr: Array = [];        // 调用 _descendants 获取所有的子节点    this._descendants((node: ChildNode) => {      const valid = node._isMatch(selector);      if (valid) {        retArr.push(node);      }      // 如果是 findOne，后面的就不继续执行了      if (valid && findOne) {        return true;      }      return false;    });
    return retArr;  }    private _descendants(fn: (n: Node) => boolean) {    let shouldStop = false;    const children = this.getChildren();    for (const child of children) {      shouldStop = fn(child);      if (shouldStop) {        return true;      }      if (!child.hasChildren()) {        continue;      }      // 如果子节点也有子节点，那就递归遍历      shouldStop = (child as any)._descendants(fn);      // 如果应该停止查找（一般是 findOne 的时候就不需要查找后面的了）      if (shouldStop) {        return true;      }    }    return false;  }</childnode extends node = node>

在isMatch里面可以看到后根据是什么类型的选择器来分别进行匹配。

      // id selector      if (sel.charAt(0) === '#') {        if (this.id() === sel.slice(1)) {          return true;        }      } else if (sel.charAt(0) === '.') {        // name selector        if (this.hasName(sel.slice(1))) {          return true;        }      } else if (this.className === sel || this.nodeType === sel) {        return true;      }

七、序列化

Konva还支持对Stage的序列化和反序列化，简单来说就是把Stage的数据导出成一份JSON数据以及把JSON数据导入，方便我们在NodeJS端进行服务端渲染。

序列化主要在toObject方法里面，它会对函数和DOM节点进行过滤，只保留一份描述信息，比如Layer的信息、Shape的信息等等，有点儿类似 React里面的Virtual DOM。

  toObject() {    var obj = {} as any,      attrs = this.getAttrs(),      key,      val,      getter,      defaultValue,      nonPlainObject;
    obj.attrs = {};
    for (key in attrs) {      val = attrs[key];      nonPlainObject =        Util.isObject(val) && !Util._isPlainObject(val) && !Util._isArray(val);      if (nonPlainObject) {        continue;      }      getter = typeof this[key] === 'function' && this[key];      delete attrs[key];      // 特殊处理函数，将其执行后把结果挂载到当前key上面      defaultValue = getter ? getter.call(this) : null;      // restore attr value      attrs[key] = val;      if (defaultValue !== val) {        obj.attrs[key] = val;      }    }
    obj.className = this.getClassName();    return Util._prepareToStringify(obj);  }

而反序列化则是对传入的JSON信息进行解析，根据className来创建不同的对象，对深层结构进行递归，然后add到父节点里面。

  static _createNode(obj, container?) {    var className = Node.prototype.getClassName.call(obj),      children = obj.children,      no,      len,      n;
    // if container was passed in, add it to attrs    if (container) {      obj.attrs.container = container;    }
    if (!Konva[className]) {      Util.warn(        'Can not find a node with class name "' +          className +          '". Fallback to "Shape".'      );      className = 'Shape';    }    // 根据传入的 className 来实例化    const Class = Konva[className];
    no = new Class(obj.attrs);    if (children) {      len = children.length;      for (n = 0; n < len; n++) {        // 如果还有子节点，那就递归创建        no.add(Node._createNode(children[n]));      }    }
    return no;  }

八、React

Konva和React绑定没有使用重新封装一遍组件的方式，而是采用了和react-dom、react-native一样的形式，基于react-reconciler来实现一套hostConfig，从而定制自己的Host Component（宿主组件）。

（一）react-reconciler

React Fiber架构诞生之后，他们就将原来的React核心代码做了抽离。主要包括react、react-reconciler和platform实现（react-dom、react-native等）三部分。

在react-reconciler里面实现了大名鼎鼎的Diff算法、时间切片、调度等等，它还暴露给了我们一个hostConfig文件，允许我们在各种钩子函数中实现自己的渲染。

在React里面，有两种组件类型，一种是Host Component（宿主组件），另一种是Composition Component（复合组件）。

在DOM里面，前者就是h1、div、span等元素，在react-native里面，前者就是View、Text、ScrollView等元素。后者则是我们基于Host Component自定义的组件，比如App、Header等等。

在react-reconciler里面，它允许我们去自定义Host Component的渲染（增删查改），这也意味着跨平台的能力。我们只需要编写一份hostConfig文件，就能够实现自己的渲染。

参考上面的架构图，会发现不管是渲染到native、Canvas，甚至是小程序都可以。业界已经有方案是基于这个来实现了。

（二）react-konva

react-konva的主要实现就在ReactKonvaHostConfig.js里面，它利用Konva原本的API实现了对Virtual DOM的映射，响应了Virtual DOM的增删查改。

这里从中抽取了部分源码：

// 创建一个实例export function createInstance(type, props, internalInstanceHandle) {  let NodeClass = Konva[type];
  const propsWithoutEvents = {};  const propsWithOnlyEvents = {};
  for (var key in props) {    var isEvent = key.slice(0, 2) === 'on';    if (isEvent) {      propsWithOnlyEvents[key] = props[key];    } else {      propsWithoutEvents[key] = props[key];    }  }  // 根据传入的 type 来创建一个实例，相当于 new Layer、new Rect 等  const instance = new NodeClass(propsWithoutEvents);  // 将传入的 props 设置到实例上面  // 如果是普通的 prop，就直接通过 instance.setAttr 更新  // 如果是 onClick 之类的事件，就通过 instance.on 来绑定  applyNodeProps(instance, propsWithOnlyEvents);
  return instance;}// 插入子节点，直接调用 konva 的 add 方法export function appendChild(parentInstance, child) {  if (child.parent === parentInstance) {    child.moveToTop();  } else {    parentInstance.add(child);  }
  updatePicture(parentInstance);}
// 移除子节点，直接调用 destroy 方法export function removeChild(parentInstance, child) {  child.destroy();  child.off(EVENTS_NAMESPACE);  updatePicture(parentInstance);}
// 通过设置 zIndex 实现 insertBeforeexport function insertBefore(parentInstance, child, beforeChild) {  // child._remove() will not stop dragging  // but child.remove() will stop it, but we don't need it  // removing will reset zIndexes  child._remove();  parentInstance.add(child);  child.setZIndex(beforeChild.getZIndex());  updatePicture(parentInstance);}

九、Vue-Konva

在Vue上面，Konva通过Vue.use注册了一个插件，这个插件里面分别注册了每个组件。

const components = [  {    name: 'Stage',    component: Stage  },  ...KONVA_NODES.map(name => ({    name,    component: KonvaNode(name)  }))];const VueKonva = {  install: (Vue, options) => {    let prefixToUse = componentPrefix;    if(options && options.prefix){      prefixToUse = options.prefix;    }    components.forEach(k => {      Vue.component(`${prefixToUse}${k.name}`, k.component);    })  }};
export default VueKonva;
if (typeof window !== 'undefined' && window.Vue) {  window.Vue.use(VueKonva);}

再来看看KonvaNode的实现，在KonvaNode里面，对于节点的增删查改都在Vue的生命周期里面实现的。在Vue的created生命周期里面调用initKonva去new一个NodeClass，和上面React的方式几乎一样。

      initKonva() {        const NodeClass = window.Konva[nameNode];
        if (!NodeClass) {          console.error('vue-konva error: Can not find node ' + nameNode);          return;        }
        this._konvaNode = new NodeClass();        this._konvaNode.VueComponent = this;
        this.uploadKonva();      },

而在Updated的时候去进行Props的更新，在destroyed里面对节点进行destroy，实现上更加简洁一些。

    updated() {      this.uploadKonva();      checkOrder(this.$vnode, this._konvaNode);    },    destroyed() {      updatePicture(this._konvaNode);      this._konvaNode.destroy();      this._konvaNode.off(EVENTS_NAMESPACE);    },