【vue3源码轻松学系列一】组件的挂载：createApp()（一瞄就会）每天学一点系列： vue3中，createAp

createApp()函数：入口函数

系统自动调用该函数，2个参数：Component（组件）、绑定的根节点

demo：

定义组件

//  组件有2个方法： data()、render()
const Component = {
    // 声明响应式数据
    data() {
        return {
           count: 0
       }
    },
    // 返回待渲染为真实DOM结构的VNode
    render() {
        return {
            'div',
            {
                onClick: () => {
                    this.count++
                }
            },
            String(this.count)
        }
    }
}

挂载根节点

createApp()函数内部将data()内的数据转换为响应式数据，通过监听数据变化，执行DOM操作，实现数据驱动DOM的目的。

//此处直接绑定id为app的div节点作为挂载的根节点 
createApp(Component,document.getElementById('app'))

createApp()函数内部需要实现以下步骤：

(1)将数据处理为响应式数据；

(2)执行渲染函数；

(3)完成DOM元素渲染。

function createApp(Component, container) {
  // 完成响应式数据的处理后，在运行时调用，此处放到对应的内存中
  const state = reactive(Component.data())
  let isMount = true
  let prevTree
  
  // 执行副作用函数: 通过watchEffect()保存待执行的函数
  watchEffect(() => {
    // 通过 call 将component.render 的上下文 this绑定到 state上
    const tree = Component.render.call(state)
    if (isMount) {
      // 通过mount()函数将VNode转换为真实的DOM结构，并插入id=app的div根节点内
      mount(tree, container)
      isMount = false
    } else {
      patch(prevTree, tree)
    }
    prevTree = tree
  })
}

什么是副作用函数

函数副作用指函数内部与外部互动。所谓effect副作用函数，可以理解为函数被调用时，内部需要产生运算以外的其他结果，此时调用副作用函数执行预设好的回调钩子函数，触发一系列更新等操作来产生其他结果。