Vue3源码阅读

57 阅读1分钟

源码阅读之createApp

Vue3源码地址:github.com/iamkata/Vue…

源码下载之后通过yarn install安装依赖,再通过yarn run dev运行项目。

vue源码的入口文件在vue/src/index.ts里面,打包之后生成的文件在vue/dist/vue.global.js里面。然后在vue/examples里面新建一个demo.html文件,引入vue.global.js就可以写示例代码了。

源码阅读推荐使用VSCode的BOOKMARKS插件来给代码打标签。 安装好之后按住:control+option+k即可打标签

createApp执行过程如下:

源码阅读之挂载根组件

mount执行过程如下:

const app = {props: {message: String}
instance
// 1.处理props和attrs
instance.props
instance.attrs
// 2.处理slots
instance.slots
// 3.执行setup
const result = setup()
instance.setupState = proxyRefs(result);
// 4.编译template -> compile
<template> -> render函数
instance.render = Component.render = render函数
// 5.对vue2的options api进行支持
data/methods/computed/生命周期

组件化的初始化

Compile过程

BlockTree分析

生命周期回调

template中数据的使用顺序