# 前端

第一步

packages/runtime-core/src/renderer.ts

export function createRenderer(renderOptions) {
  const mountComponent = (n1, n2, container, anchor) => {
      // 组件可以基于自己的状态重新渲染
      const {
        data = () => {
        }, render
      } = n2.type;

      // 组件的状态...

第一步

packages/runtime-core/src/createVnode.ts

import { isObject, isString, ShapeFlags } from '@vue/shared';

export function createVnode(type, props, children?) {
  // -----------------------------新增开始-----------------------------
  const shapeFlag = isString(type) ?...

第一步

h 函数主要是用来创建虚拟 DOM的，他的参数情况比较多，参数情况可以有 1个（类型），2个（类型，属性/儿子），3个（类型, 属性, 儿子），超过 3 个（从第三个开始后面都是儿子），如下：

h(类型)
h(类型, 属性, 儿子)
h(类型, 儿子)

两个参数的情况：

1. 两个参数的时候，第二个参数可能是属性，或者虚拟节点（根据 `__v_isVnode` 来判断）
1. 第二个参数的数组的话，那第二个参数肯定是儿子
1. 直接传递非对象的话，那说明就是文本
1. 其他情况下，...

第一步

packages/runtime-core/package.json

{
  "name": "@vue/runtime-core",
  "version": "1.0.0",
  "module": "dist/runtime-core.esm-bundler.js",
  "unpkg": "dist/runtime-core.global.js",
  "buildOptions": {
    "name": "RuntimeCore",
    "formats": [...

第一步

新建 runtime-dom 模块

packages/runtime-dom/package.json

{
  "name": "@vue/runtime-dom",
  "version": "1.0.0",
  "module": "dist/runtime-dom.esm-bundler.js",
  "unpkg": "dist/runtime-dom.global.js",
  "buildOptions": {
    "name": "RuntimeDOM",
    "formats": [...

第一步

watchEffect 函数是当依赖的值变化后，自动指定该函数中的代码

import { ReactiveEffect } from './effect';
import { isFunction, isObject } from '@vue/shared';
import { isReactive } from './reactive';
import { isRef } from './ref';

export function watch(source, cb, options = {} as any) {...

第一步

watch 这个方法并不在响应式模块中，他是运行时中的 api，但是它确实是通过响应式模块实现的

reactive.ts

...

export function isReactive(value) {
  return !!((value && value[ReactiveFlags.IS_REACTIVE]));
}

ref.ts

...

export function isRef(value) {
  return value &&...

第一步

计算属性维护了一个 dirty 属性，默认值是 true，运行过一次后，会将 dirty 变为 false， 并且当依赖的值变化后，会让 dirty 再次变为 true

计算属性是具备依赖收集的能力，可以收集对应的 effect，依赖的值变化后会触发 effect 重新执行

packages/reactivity/src/constants.ts

...

export enum DirtyLevels {
  // 脏值，意味着取值的时候要运行计算属性
  Dirty = 4,...

toRef

ref.ts

import { toReactive } from './reactive';
import { activeEffect, trackEffect, triggerEffects } from './effect';
import { createDep } from './reactiveEffect';

...

class ObjectRefImpl {
  // ref 标识
  public __v_isRef = true;

  constructor(public...

第一步

index.ts

export * from './reactive';
export * from './effect';

// -----------------------------新增开始-----------------------------
export * from './ref';
// -----------------------------新增结束-----------------------------

ref.ts

import { toReactive }...