品着咖啡聊代码,岂不乐哉?
昨日举杯饮瑞幸,忽然脑海中浮现一张 Vue
的生命线图。借着这股“咖啡因”劲,画出了下面这幅图:
每个 Vue
项目中,都会调用 newVue()
去初始化根实例。在 Vue
内部中,就会执行 Vue.prototype._init
方法,然后做一系列的初始化工作,比如事件、渲染、依赖注入、数据状态等,细节现在不谈,后面再单独搞一篇文章说明每个函数的作用。
这里我们只看 initState
和实例挂载过程。在 initState
执行时,会对 props
、 data
、 methods
、 computed
、 watcher
分别初始化。
这里我们只看 initData
,因为 data
才是顶图中的主角。initData
做了什么伟大的事情让它变得如此光鲜亮丽呢?
删除了 2/3 的开发环境才有的代码, initData
也就只做了两件事——把 data
上的属性通过 proxy
代理到 vm
下(为什么我们能够直接通过 vm.name
访问到私有属性 _data
下的 name
,原因就在这里!为了避免我的描述让你懵XX,补一个