vue源码逻辑

PaaS     sdk项目

返回VNode

编写完成可视化项目左侧为可拖拽组件右侧为该组件的可传参内容

打包

预览拖拽好的页面的时候

用户手写 render 方法使用

本地开发调试时

判断tag，并确定tag的VNode类型（svg、html标签、空、组件等等）

上线后

是否有旧的vnode

拖拽组件形成页面的时候

通过 yarn link方式引入项目并设置 alias 配置路径

写好的组件库

确定children类型

被模板编译成的 render 函数使用

b.xxx、b.aaa操作正常执行

此项目包含2个项目：1.运营可视化编辑的项目2.编写好的脚手架项目，里面存放着写好的所有组件，并用于在线构建打包3.后台项目，负责与第一个项目交互

common组件 A其中import { b } from b.jsb.xxxb.aaa执行了一些列操作

应用（应用中使用 sdk 打包按原有方式直接打包进应用中）

所有执行完成后，运营编辑这边根据返回路径打开已打包好的页面

initRender

b.xxx、b.aaa这些操作不想被执行

@platform 引用

构造子类构造函数（使用原型继承的方式把纯对象转换成继承于Vue的构造器Sub，并扩展options等）

函数式组件就是通过h函数返回一个vnode，函数式组件核心就是h函数

是

安装组件钩子函数

否

vm._c

createElement\\h

点击保存发起请求告诉node使用shelljs执行打包命令在线打包，内容如下，

引入功能模块b.js

amd格式 jssdk-designer.jssdk-preview.js

实例化VNode，通过new VNode实例化vnode并返回

可视化项目（项目1）

仿真器（加载 amd 格式的 sdk 文件）

NO_CHILDREN、SINGLE_VNODE、KEYED_VNODES

VNode类型包括：ELEMENT_SVG、ELEMENT_HTML、FRAGMENT、PORTAL、COMPONENT_FUNCTIONAL、COMPONENT_STATEFUL_NORMAL

引用

脚手架项目，用components存放写好的组件（项目2）

拖拽组件或填写参数最终会形成一个json

node控制将获取到的json解析后，将componnets通过new Vue()中的components传入，props同理，通过template或者render函数展示dom，最终生成打包入口文件main.js文件组件引入（()=>import('xxxx')为此方式最后node命令执行webpack打包生成项目

通过h函数返回的vnode以及其他信息通过深度遍历后执行container.appendChild(document.createElement(vnode.tag))添加到页面中

vm.$createElement

createComponent(当render的为一个组件时)