vue流程编辑器框架Vue-Flowchart-Editor

Posted 2023-05-22 石健

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue流程编辑器框架Vue-Flowchart-Editor相关的知识，希望对你有一定的参考价值。

vue流程编辑器框架——Vue-Flowchart-Editor

前言：

　　不管是OA系统常见的审批流程图还是业务流程图，前端经常会遇到一些流程编辑器的业务场景，分享一个我举得好用的vue组件：

　　Vue-Flowchart-Editor：一个基于Vue的流程图编辑器组件，支持创建、编辑和展示流程图，具有可拖拽节点、连接线、自动布局等功能。

官网地址：https://gitee.com/martsforever-pot/vue-flow-editor

简介

vue-flow-editor 是基于 Vue2.0 以及 G6@3.1.10 实现的流程编辑器。在线操作地址：

http://martsforever-pot.gitee.io/vue-flow-editor/

特点

兼容ie；
轻量级依赖
- 依赖于 Vue2.0、vue-composition-api、g6、element-ui，但是打包的 vue-flow-editor 中是不包含这些依赖的，由开发者手动引入，方便管理依赖；
- 对G6的连接线进行了简单封装，对节点无影响。开发者可以使用G6的默认节点以实现自定义的样式；
- 操作丰富，请见操作手册；
界面简洁，左侧菜单栏以及顶部工具栏都有插槽供开发者自定义内容；
内置一个右侧弹出框，开发者可以通过插槽，以及手动打开这个弹出框以编辑节点内容；

安装

npm安装

npm i vue-flow-editor element-ui @vue/composition-api@0.3.2 -D

 import Vue from \'vue\'
 
 import ELEMENT from \'element-ui\'
 import \'element-ui/lib/theme-chalk/index.css\'
 
 import \'vue-flow-editor/docs/lib/g6.umd.min\'
 import vca from \'@vue/composition-api\'
 import VueFlowEditor from \'vue-flow-editor\'
 import \'vue-flow-editor/docs/dist/vue-flow-editor.css\'
 
 import App from \'./App.vue\'
 
 Vue.use(ELEMENT)
 Vue.use(vca)
 Vue.use(VueFlowEditor)
 
 Vue.config.productionTip = false
 
 new Vue(
     render: h => h(App),
 ).$mount(\'#app\')

效果图：

注意：如果你的构建目标需要兼容ie的话，这样做还不够，你还需要这么做：

配置webpack，编译的时候排除vue以及 @vue/composition-api，因为引入的 @vue/composition-api好像不支持ie，所以要这么做；

再index.html模板文件中手动引入这两个文件：

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>

vue2源码框架和流程分析

vue整体框架和主要流程分析

之前对看过比较多关于vue源码的文章，但是对于整体框架和流程还是有些模糊，最后用chrome debug对vue的源码进行查看整理出这篇文章。。。。

本文对vue的整体框架和整体流程进行简要的分析，不对某些具体的细节进行分析，所有需要对vue有初步的认识，包括对Object.defineProperty、虚拟DOM有一定了解，本文不会对Object.defineProperty、虚拟DOM的原理和细节进行分析。
vue大体可以分两个部分：

1.采用Object.defineProperty进行数据的双向绑定；

2.采用虚拟DOM技术进行视图渲染；

vue入口

技术图片

vue构造函数调用了this._init(options)方法，这个方法在initMixin中，如上图所示，进入initMixin

initMixin主要完成数据的初始化和视图的初始化：

1.数据初始化主要是数据的observe，在上图的initState中进行；

2.视图的初始化在vm.$mount(vm.$options.el),其中vm为Vue的实例，watcher的设置也是在vm.$mount(vm.$options.el）中完成的；

我们可以看到这里定义了beforeCreated和created这两个钩子函数。

数据初始化

接着上面我们看看数据初始化都做了什么，进入initState
技术图片

这里我们主要对数据进行操作的是initData，传入的是vm，我们来具体看看initData：

我们先忽略前面的一些逻辑判断，主要看两个地方：

1.数据代理，主要是将_data的数据代理到vm上，这样的话可以直接对vm上的数据进行修改;

2.数据observe，传入data；

我们先看看vue怎么对数据进行observe的，进入observe
技术图片

在observe里返回的是ob，也就是Observer类的实例，我们看看Observer类是怎么定义的，进入Observer类

如上图在对data进行observe时对数组进行了特殊的处理，这块我们先不看，先看一般情况下的处理，即调用this.walk(value)

walk主要对data的属性进行遍历，进入defineReactive
技术图片

可以看到Object.defineProperty是在这里对属性设置get和set的，其中get主要进行依赖收集，其实就是在收集视图渲染的watcher，后面会提到，set主要是数据更新时进行视图的更新

至此，数据的初始化就完成了，从上面的分析来看，数据的初始化主要的工作就是对数据进行observe。

视图挂载

接着上面，在vue入口那里，我们知道视图的挂载主要是调用了vm.$mount(vm.$options.el)
技术图片

如图，所以我们进入vm.$mount，看看里面都干了啥，在源码里面有两处地方涉及到$mount

这是第一处，就是return mountComponent

这是第二处，上面两个图是一起的，屏幕大小有限，所以截了两个图。。。

咱们看看第二处，里面做了一个处理，就是将template编译成render函数，在vue的教程里有render函数的使用，这里我们可以看出我们在组件里定义render函数会比定义template快，因为在定义template的组件挂载时多了一步将template编译成render函数；

第二处的return 还是调用了第一处，所以我们看看第一处调用的mountComponent方法，进入mountComponent
技术图片

上面两个图是一起的，屏幕大小有限，所以截了两个图。。。

这里我们可以看到定义了两个钩子beforeMount和mount，中间调用了watcher，我们看一下这里watcher的定义，这里标注的不太好，挡住了。。。我们看看watcher的这行代码：

vm._watcher=new Watcher(vm,updateComponent,noop)

我们可以看到Watcher类主要传入了vm,updateComponent,noop三个参数，其中updateComponent的主要作用是将虚拟DOM转化为真实的DOM并进行挂载，具体的细节下面在讨论，我们下面看看Watcher类是怎么定义的，进入Watcher
技术图片

这里我们注意两个地方，一个是this.getter的定义，这里就是上面传进来的updateComponent，还有就是执行this.get()，我们进入这个get方法

这里我们看到首先收集的依赖是当前watcher实例，然后调用getter方法也就是updateComponent方法，之前我们对updateComponent方法的作用进行了简单的说明，这里我们具体看看updateComponent都干了啥，进入updateComponent:
技术图片

这里调用了vm._update方法，其中传入的参数有vm._render()，_render函数主要的作用是产生虚拟DOM，进入_update

这里主要是将虚拟DOM转化为真实DOM并进行挂载，分两种情况，分别是有旧的虚拟DOM和无旧的虚拟DOM，对应初始化时调用还是数据更新时调用,这里定义了一个钩子beforeUpdate

到这里，视图的初始化和挂载也结束了，下面看看数据变化时视图是如何更新的

数据变化时视图更新过程

接着上面我们看看数据变化时视图是怎么变化的，在数据初始化的时候，我们知道数据变化时将触发set方法，如下图：
技术图片

上图可以看出，set最后调用了dep.notify，进入notify

如上图，notify主要将收集的依赖，也就是收集的所有watcher，调用所有watcher的update方法，我们看看watcher的updata方法干了啥

这里就是调用了queueWatcher,进入queueWatcher

这里采用队列异步更新，就是讲=将watcher push进队列queue中，然后执行nextTick方法，进入nextTick
技术图片

上面两个图是一起的，屏幕大小有限，所以截了两个图。。。

这个部分有点难看，cb为传入的flushSchedulerQueue函数，执行timerFunc，将nextTickHander加入异步队列，执行nextTickHander，执行cb，既执行flushSchedulerQueue，进入flushSchedulerQueue
技术图片

上面两个图是一起的，屏幕大小有限，所以截了两个图。。。

主要看watcher.run(),进入watcher.run

执行了this.get()，即进入前面数据渲染和挂载的地方

到这里，vue整个的执行流程基本就结束了。