# w_vue

**Repository Path**: wade369/w_vue

## Basic Information

- **Project Name**: w_vue
- **Description**: 简写vue
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-05-12
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# w_vue

![vue](https://user-gold-cdn.xitu.io/2017/12/19/1606e7eaa2a664e8?imageslim)

## Vue 响应式原理

1. 初始化数据

在`new Vue()`之后。Vue会调用进行初始化，初始化生命周期、事件、props、methods、data、computed与watch等。其中最重要的是通过
`Object.defineProperty`设置`setter`与`getter`，用来实现 **[响应式]** 以及 **[依赖收集]**。

2. 递归属性劫持
3. 数组方法的劫持
4. 数据代理

## 模板编译

编译模板分为三个阶段：
parse：使用正则解析template中的vue的指令、变量等等，形成ast语法树
optimize：标记一些静态节点，用作后面的性能优化，在diff的时候直接略过
generate：把第一步生成的ast转化为渲染函数 render function

1. 解析标签和内容
2. 生成ast语法树
3. 生成代码
4. 生成render函数

## 创建渲染watcher

1. 初始化渲染Watcher
2. 生成虚拟dom
3. 生成真实DOM元素

## 生命周期合并

1. Mixin原理
2. 合并生命周期
3. 调用生命周期
4. 初始化流程中调用生命周期

## 依赖收集

1. 在渲染时存储watcher
2. 对象依赖收集
3. 数组的依赖收集

## 实现Vue异步更新之nextTick

1. 实现队列机制
2. nextTick实现原理