[咖聊] Vue 执行过程

2022-06-16 16:34:12 浏览数 (1)

品着咖啡聊代码,岂不乐哉?

昨日举杯饮瑞幸,忽然脑海中浮现一张 Vue 的生命线图。借着这股“咖啡因”劲,画出了下面这幅图:

每个 Vue 项目中,都会调用 newVue() 去初始化根实例。在 Vue 内部中,就会执行 Vue.prototype._init 方法,然后做一系列的初始化工作,比如事件、渲染、依赖注入、数据状态等,细节现在不谈,后面再单独搞一篇文章说明每个函数的作用。

这里我们只看 initState 和实例挂载过程。在 initState 执行时,会对 propsdatamethodscomputedwatcher 分别初始化。

这里我们只看 initData,因为 data 才是顶图中的主角。initData 做了什么伟大的事情让它变得如此光鲜亮丽呢?

删除了 2/3 的开发环境才有的代码, initData 也就只做了两件事——把 data 上的属性通过 proxy 代理到 vm 下(为什么我们能够直接通过 vm.name 访问到私有属性 _data 下的 name,原因就在这里!为了避免我的描述让你懵XX,补一个

0 人点赞