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)
  })
}
相关推荐
熊猫钓鱼>_>5 小时前
Electron:当 Web 技术统治桌面
大数据·前端·javascript·人工智能·架构·electron·agent
德福危险5 小时前
从盲打xss到到模板注入:unix靶机渗透之Tempus_fugit4
前端·unix·xss
JavaGuide5 小时前
又一个画图 Skill 开源,再见手动画 draw.io!
前端·后端·github
一只猫的梦5 小时前
AI 适配器架构
前端·chrome
谭光志5 小时前
AI 是怎么操作浏览器的——browser use 实现原理
前端·javascript·ai编程
weixin_471383036 小时前
args,...args与Parameters<T>
开发语言·前端
一tiao咸鱼6 小时前
前端转 agent # 03 - Pydantic v2 数据校验深入
前端·后端
Cobyte6 小时前
23.Vue Vapor 组件 attrs 的实现
前端·javascript·vue.js
前端H7 小时前
生成式 UI 实战:AI 如何重塑前端界面
前端·人工智能·ui
懂懂tty7 小时前
Web前端性能指标
前端