18-mini-vue element

实现初始化 element

  1. 走 render 方法时,调用 patch ,区分 element 和 component
  2. 遇到 element, 代码如下
js 复制代码
// renderer.ts
function patch(vnode, container) {
  // 对类型进行区分
  if (typeof vnode.type === 'string') { 
    processElement(vnode, container)
  } else if (isObject(vnode.type)) {
    processComponent(vnode, container)
  }
}
function processElement(vnode, container) {
  mountElement(vnode, container)
}
function mountElement(vnode, container) {
  const { type, props, children } = vnode
  const el = document.createElement(type) 
  if (typeof children === 'string') {
    el.textContent = children
  } else if (Array.isArray(children)) {
    mountChildren(children, el)
  }
  for (let key in props) {
    let val = props[key]
    el.setAttribute(key, val)
  }
  container.append(el)
}
function mountChildren(children, el) {
  children.forEach(vnode => {
    patch(vnode, el)
  })
}
相关推荐
大橙子额31 分钟前
【解决报错】Cannot assign to read only property ‘exports‘ of object ‘#<Object>‘
前端·javascript·vue.js
getapi1 小时前
注塑件的费用构成
linux·服务器·ubuntu
LYFlied2 小时前
从 Vue 到 React,再到 React Native:资深前端开发者的平滑过渡指南
vue.js·react native·react.js
爱喝白开水a2 小时前
前端AI自动化测试:brower-use调研让大模型帮你做网页交互与测试
前端·人工智能·大模型·prompt·交互·agent·rag
董世昌412 小时前
深度解析ES6 Set与Map:相同点、核心差异及实战选型
前端·javascript·es6
B站_计算机毕业设计之家2 小时前
豆瓣电影数据采集分析推荐系统 | Python Vue Flask框架 LSTM Echarts多技术融合开发 毕业设计源码 计算机
vue.js·python·机器学习·flask·echarts·lstm·推荐算法
lucky-billy2 小时前
Ubuntu 下一键部署 ROS2
linux·ubuntu·ros2
阿梦Anmory2 小时前
Ubuntu配置代理最详细教程
linux·运维·ubuntu
吃杠碰小鸡3 小时前
高中数学-数列-导数证明
前端·数学·算法
kingwebo'sZone3 小时前
C#使用Aspose.Words把 word转成图片
前端·c#·word