Vue中createApp和mount方法实现

Dream_ksw

已于 2023-03-23 20:43:33 修改

阅读量89

点赞数

文章标签： vue.js javascript 前端

于 2023-03-23 20:34:37 首次发布

本文链接：https://blog.csdn.net/weixin_53003673/article/details/129738464

版权

function createApp(rootComponent) {
  return {
    mount(rootContainer) {
      const container = document.querySelector(rootContainer)
      let isMounted = false
      let oldVNode = null

      watchEffect(() => {
        if(!isMounted) {
          // 如果没有挂载过  初始化操作
          oldVNode = rootComponent.render()
          mount(oldVNode, container)
          isMounted = true
        } else {
          // 挂载了 说明是更新操作
          const newVNode = rootComponent.render()
          patch(oldVNode, newVNode)
          // 存储当前的vnode 作为下一次path时旧的vnode
          oldVNode = newVNode
        }
      })
    }
  }
}