结合Vue3-demo项目分析源码(五)

结合Vue3-demo项目分析源码(四),完成组件的创建,包含创建组件实例createComponentInstance和设置组件实例setupComponent两个步骤。整个组件的创建过程涉及到两个生命周期beforeCreatedcreated,到created才算组件创建完成,此时进入组件的渲染过程。回到mountComponent()方法,查看方法setupRenderEffect()

1
2
3
4
5
6
7
8
9
10
11
12
13
const mountComponent: MountComponentFn = (
...
) => {
//创建组件实例
const instance: ComponentInternalInstance = (initialVNode.component = createComponentInstance(...))
...
//设置组件实例
setupComponent(instance)
...
//处理setup方法
setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense,isSVG, optimized)
...
}
阅读更多...

结合Vue3-demo项目分析源码(三)

结合Vue3-demo项目分析源码(二),创建完App实例,开始创建组件。接上篇mountComponent()方法,调用了createComponentInstance方法创建了一个初始化状态的组件实例instance,接下来就根据组件的定义调用方法setupComponent()设置此组件实例

1
2
3
4
5
6
7
8
9
10
11
12
13
const mountComponent: MountComponentFn = (
...
) => {
//创建组件实例
const instance: ComponentInternalInstance = (initialVNode.component = createComponentInstance(...))
...
//设置组件实例
setupComponent(instance)
...
//处理setup方法
setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense,isSVG, optimized)
...
}
阅读更多...

结合Vue3-demo项目分析源码(一)

Vue3-demo项目即为先前从0搭建简易vue3项目中搭建的demo

分析

入口文件main.js

1
2
3
4
5
import { createApp } from "vue";//引入Vue3源码
import App from "./App";//引入App.vue组件
const app = createApp(App,{msg:"Hello Vue"})//创建App组件,传递msg参数

app.mount("#app")//渲染app,将其挂载到id=app的节点上

通过在浏览器上不同位置打断点,可以按步骤流程分析Vue源码的实现流程。

阅读更多...

从0搭建简易vue3项目

步骤

  1. 创建目录,使用npm init -y初始化项目

  2. 使用npm install -D xxx ...命令安装webpack相关依赖

    • webpack:webpack编译打包核心库

    • webpack-cli:webpack指令库

    • webpack-dev-server:webpack开发者服务框架

    • webpack-chain:webpack配置工具

  3. 创建webpack配置文件webpack.config.js

阅读更多...
  • © 2020-2021 Aweso Lynn
  • PV: UV: