07-Vue3.0源码阅读之更新流程分析上「这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战

「这是我参与2022首次更文挑战的第19天，活动详情查看：2022首次更文挑战」。

前言

这部分内容对于新入坑阅读源码的小伙伴们来讲还是有些复杂的，我们这部分主要会采取分析调用栈信息（从最后一步的位置打断点，运行后看调用栈信息）、单步执行之后，再进入代码部分来阅读源码。

整体思路

我们先来回顾以下之前分析的整体流程，在初始化的时候，曾经做过的事情是什么？下图：

有一个方法setupRenderEffect，此方法会建立更新机制。

初始化

我们可以在example部分再穿件一个02-patch.html,内容如下

<div id="app">
  <h1>vue3 更新流程</h1>
  <p>{{counter}}</p>
  <comp></comp>
</div>
<script src="../dist/vue.global.js"></script>
<script>
  // vue2: new Vue({})
  // 变化1:函数创建实例
  // vue3 createApp({})
  const app = Vue.createApp({
    data() {
      return {
        counter: 1
      }
    },
    mounted() {
      setInterval(() => {
        this.counter++
      }, 1000)
    }
  })
  // 变化2:实例方法
  app.component('comp', {
    template: '<div>1212</div>'
  })
  // 变化3: 挂载mount
  app.mount('#app')
</script>