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)
  })
}
相关推荐
IT_陈寒1 天前
SpringBoot这个自动配置坑我跳了三次
前端·人工智能·后端
kyriewen1 天前
我用 AI 一周写完了整个项目,上线第一天就崩了——这是我踩过最贵的 5 个坑
前端·javascript·ai编程
牧艺1 天前
从零到协同:构建类飞书在线文档系统的五个技术重难点
前端·人工智能
红尘散仙1 天前
想写一个像样的终端 App?试试把 React 的开发体验搬进 Rust TUI
前端·rust
袋鼠云数栈UED团队1 天前
一套 Spec-First 的 AI 编程工作流
前端·人工智能
袋鼠云数栈前端1 天前
一套 Spec-First 的 AI 编程工作流
前端·ai+
angerdream1 天前
Android手把手编写儿童手机远程监控App之vue3 路由守卫
前端
不服老的小黑哥1 天前
AI规范驱动编程-harness工程项目实战
前端
vivo互联网技术1 天前
从 Web 到桌面:基于 Tauri 2.0 + Vue 3 打造 vivo 线下门店「大头贴」拍照体验系统
前端·rust
光影少年1 天前
React 合成事件机制、和原生事件区别、事件冒泡阻止
前端·react.js·掘金·金石计划