vue源码逻辑
2019-10-18 11:13:45 0 举报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的为一个组件时)
0 条评论
下一页
