2.1　createApp（）函数

createApp（）函数为Vue3的入口函数，在引入框架后，系统会直接调用该函数。它需传入两个参数：第一个参数为Component（组件），第二个参数为需绑定的根节点。Component实现内容如下：

在Component组件中有两种方法：data（）和render（），在data（）方法内声明响应式数据，在render（）方法内返回待渲染为真实DOM结构的VNode，包含div标签、onClick（）方法和this.count值。data（）内的count为响应式数据，当单击div后，count加1，实现数据的自动增加。该VNode对应的template写法如下：

     ＜div onClick='()=＞{this.count++}'＞{{this.count}}＜/div＞

createApp（）函数内部将data（）内的数据转换为响应式数据，通过监听数据变化，执行DOM操作，实现数据驱动DOM的目的。在挂载过程中，需声明一个根节点作为组件挂载的锚点，挂载渲染完成的组件。

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

createApp（）函数内部需要实现以下步骤：

（1）将数据处理为响应式数据；

（2）执行渲染函数；

（3）完成DOM元素渲染。

根据上述步骤查看createApp（）函数的内部实现，具体代码如下：

由图2.1可知，该函数内部执行将对象转换为响应式数据的方法。通过watchEffect（）（effect副作用函数）保存待执行的函数，最后通过mount（）函数将VNode转换为真实的DOM结构，并插入id=app的div根节点内。

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