# vue2源码学习

**Repository Path**: small_and_big_monsters/vue-source-code-learning

## Basic Information

- **Project Name**: vue2源码学习
- **Description**: 跟着珠峰T0级别讲师一起学vue2源码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2022-09-22
- **Last Updated**: 2025-03-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue2源码学习





#### 安装教程

1.  初始化：npm init -y
2.  安装rollup：npm install roolup -D
3.  在rollup里使用babel：npm install rollup rollup-plugin-babel @babel/core @babel/preset-env --save-dev


#### 初始化
    - initMixin()
        - initState()  状态初始化
            - initData()   data初始化

#### 响应式
    - 核心：Object.defineProperty，对对象里的数据进行递归劫持，get获取数据，set更新数据
    - Obverser，创建实例，根据实例来判断是否已经被劫持
    - 数组劫持的核心：重写数组方法，观测数组的每一项

#### 解析模板参数
    - 通过vm.$mount()实现数据挂载
    - 将$mount绑定在原型链上，查找顺序：render函数 ==> template ==> 外部template,el
    - 通过compileToFunction()函数对模板进行编译：
        1.将template转化成ast语法树
        2.生成render函数（render执行后的结果就是虚拟dom）
    - 通过正则匹配对模板进行编译处理（解析一个删除一个，直到全部解析完成）
    - 将属性和原理进行截取和拼接

#### 虚拟DOM转化成真实DOM
    - 核心方法：initLiftCycle
    - 调用render函数产生虚拟节点，通过_update函数将虚拟DOM转化成真实DOM
        - patch方法，既有初始化功能，又有更新功能
        - 获取老的真实元素和其父元素
        - 通过createElm方法将虚拟节点和真是节点对应起来
        - 子节点通过递归遍历的方式添加到虚拟节点上
    - 获取到新节点
    - 删除老节点，在老节点下一个节点的前面添加新节点(insertBefore,elm.nextSubling)

#### 数据变化后自动重新渲染
    - 观察者模式实现依赖收集
    - 创建Watcher和Dep类，使之相互关联
    - 获取数据时使用get方法，调用dep.depend方法，让watcher记录dep
    - 更新数据时使用set方法，调用dep.notify方法，通知视图更新

#### 异步更新策略
    - 将watcher放到一个数组中，循环执行
    - nextTick原理：优雅降级
        - Promise（ie不兼容）
        - MutationObserver（H5方法，异步，微任务）
        - setImmedate（ie专属方法）
        - setTimeout


#### mixin实现原理
    - 通过策略模式将mixin中的和原来的合并到一起，组成一个队列，依次执行

#### 数组实现更新原理
    -递归遍历，重写方法
        - 在Obverser类中增加dep属性，进行依赖收集
        - 在definePropety的get方法中判断所劫持的对象，执行depend方法
        - 如果是数组，就进行递归遍历