背景 想要做一个网页端的聊天提醒，使用elementUi的notify组件，有消息来的时候直接弹出，但是在弹出层里面想要放置一个按钮，点击按钮可以直接弹出回复框这样子的，所以就需要在notify的message属性中使用VNode来渲染按钮。 正文 使用Vue的this.$createElement来创建VNode具体的函数使用可以百度 可以参考这篇博客:https://www.cnbl

JSX <div className="container"><p onClick={onClick} data-name="p1">hello <b>{name}</b></p><img src={imgSrc}/><MyComponent title={title}></MyComponent></div> Vue 模板 <div class="container"><p

源码 流程图 源码解读 Vue.js2.0中有两种生成方式：第一种是直接在Vue对象的option中添加render字段；第二种是像Vue.js 1.x版本那样写一个模板或者指定一个el根元素，它会首先转换成模板，经过HTMI语法解析器生成一个 ast 抽象语法树，对语法树做优化，然后把语法树转换成代码片段，最后通过代码片段生成function添加到option的render字段中。 在整

VNode 是什么？ VNode 是 Virtual Node 的缩写，它是 Vue.js 中用来描述真实 DOM 节点的对象。在 Vue 中，每个组件都会被渲染成一个 VNode 树，然后由虚拟 DOM 算法（Virtual DOM Algorithm）将其转化为真实的 DOM 节点。 VNode 的优势在于，它比操作真实 DOM 节点要快得多，因为它只需要更新变化的部分，而不需要重新渲染整

1、使用场景 如图：消息提示框中，将数据中的数据单独一行显示 2、代码 let errorList = res.result; //后端返回的数据例： ["1. 数据格式不正确","2. 数据已存在"]if(errorList&&errorList.length!=0){this.$notification.open({message: "数据有误！",duration:0, //取消定时

VNode 节点类型 对于vnode而言，具备很多节点类型vue源码中patch函数switch处理包含了好几种类型，常见类型如下 Text：文本节点Comment：注释节点Static：静态dom节点Fragment：包含多个根节点的模板被表示为一个片段 fragmentELEMENT：DOM 节点COMPONENT：组件TELEPORT：新的内置组件SUSPENSE：新的内置组件… h函

VNode 节点类型 对于vnode而言，具备很多节点类型vue源码中patch函数switch处理包含了好几种类型，常见类型如下 Text：文本节点Comment：注释节点Static：静态dom节点Fragment：包含多个根节点的模板被表示为一个片段 fragmentELEMENT：DOM 节点COMPONENT：组件TELEPORT：新的内置组件SUSPENSE：新的内置组件… h函

目录 1  patch介绍 1.1  新增节点 1.2  删除节点 1.3  更新节点 1.4  patch运行流程  2  创建节点  3  删除节点  4  更新节点 4.1  静态节点 4.2  新虚拟节点有文本属性 4.3  新虚拟节点无文本属性 4.4  更新节点小结  5  更新子节点 5.1  更新策略 5.2  优化策略 5.3  哪些节点是未处理过