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)
  })
}
相关推荐
哟哟耶耶1 天前
Plugin-webpack内置功能split-chunks-plugin配置打包代码分割
前端·webpack·node.js
乞丐哥1 天前
乞丐哥的私房菜(Ubuntu OpenCV篇——Image Processing 节 之 Out-of-focus Deblur Filter 失焦去模糊滤波器 滤镜)
c++·图像处理·opencv·ubuntu·计算机视觉
青梅主码1 天前
给 AI 打个分,就能搞出估值17亿独角兽??刚刚完成1.5亿美元A轮融资,这个AI 评测平台彻底火了!LMArena
前端
GUIRH1 天前
Vue指令
前端
林恒smileZAZ1 天前
前端技巧:检测到省略号文本自动显示 Tooltip
开发语言·前端·javascript
Zzz不能停1 天前
阻止冒泡和阻止元素默认行为的区别
开发语言·前端·javascript
攀登的牵牛花1 天前
前端向架构突围系列 - 架构方法(三):前端设计文档的写作模式
前端·架构
l04090442221 天前
安装 WSL 报错 Error code: Wsl/WININET_E_NAME_NOT_RESOLVED 问题解决
ubuntu
m0_528723811 天前
如何避免多次调用同一接口
前端·javascript·vue.js·性能优化