06-Vue3.0源码阅读之流程整理及思考

153 阅读1分钟

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

流程整理

前面我们只是粗略的分析了一下大概的运行脉络,但实际上代码是如何渲染的知识树部分依然是空缺,接下来我们使用断点文件/src/vue/examplas/composition/todotodomvc.html采用查看调用栈的方式来看调用栈的运行,示例如下:

image.png

然后我们对渲染部分的源码运行流程进行一下整理汇总:

image.png

我们第一次运行走的是从上到下01线路,先mount然后依次rander、patch、processComponent、mountComponent、mountComponent、setupRenderEffect,如果需要,从patch来循环递归,后面再进来走02线路,根据需求从上至下依次来处理。

关于初始化部分的延伸思考

经过上面部分的分析整理至此我们应该对具体的函数运行有了进一步的了解,那么又延伸出来一个新的问题,你知道Vue2.0和Vue3.0的区别么?Vue3相对于Vue2进行了哪些改变,为什么?

为了分析这里的区别,我们先创建一个新的Vue3.0的页面,代码如下

image.png

显而易见有以下的变化,

创建实例的方式变化

Vue2创建实例是new Vue({}).$mount()

Vue3的实例创建是Vue.createApp()

3.0采用了函数的方式进行了实例创建的管理,原因是为了对ts等强类型的支持变的更好。很明显函数更方便参数的定义的类型检测,而原有的方式对于ts类型支持不友好。

实例方法变更的变化

Vue3中挂载组件变成了

app.component("comp", {
    template: "<div></div>"
})

现在对于实例方法的变更只需要对应实例调用方法就可以了,原有的我们会对实例进行变更,造成全局的污染。

挂载mount产生了变化

app.mount("#app")

原来是$mount是为了专门告诉使用者,这是一个特殊的方法,新版本对于API进行了简化,也进行了一致性的调整。