# vue-source

**Repository Path**: hh-mdzz/vue-source

## Basic Information

- **Project Name**: vue-source
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-07-16
- **Last Updated**: 2024-08-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### vue core 源码部分文件夹内容（https://github.com/vuejs/core/tree/main/packages）

reactivity 响应式代码

compiler 编辑器
compiler-sfc 单文件组件的编译器，将.vue 文件编译成 js 文件，其中 setup 语法糖会编译成 setup 函数，而 template 标签则会编译成 render 函数 sfc 指的是单文件组件.vue 文件
compiler-dom 用于编译以 cdn 方式引入的 vue 代码
compiler-core 解析 template script style 中的代码 即转换成 ast 再逐步加工的过程

runtime 运行过程
用于在运行 sfc dom core 处理过的代码

shared vue 中的公共方法（类似 utils 文件夹）

### reactivity

一部分响应式方法可能会与 dom 元素绑定，实现了 MVVM（modelView viewModel 即视图更新数据更新，数据更新试图更新）
为实现该功能，需要使用一个副作用函数 effect

```
副作用函数和纯函数区别：
纯函数的输出完全由输入决定，而副作用函数可能会受到外部状态的影响；副作用函数可能会修改外部状态或产生其他影响，而纯函数则不会。
```

vue3:proxy vue2 object.defineProperty

vue2 响应式原理：组件实例化时会递归地使用 Object.defineProperty 劫持 data 中的所有属性，并添加 getter 和 setter。当这些数据被访问或更改时，Vue 可以通过 getter 和 setter 检测到这些变化，并触发视图更新。

vue3 更改为 proxy 的原因：

1. 数组的 API 拦截不到
2. 对象新增的属性不能拦截
3. 是通过 length 修改数组拦截不到
4. 数组性能问题

vue2 性能示例：

```js
<template>
   <div>{{arr}}</div>  <!--有变化吗-->
</template>
data () {
    return {
        arr:[1,2,3]
    }
}
mounted () {
    //这样修改arr视图不会改变
    this.arr[0] = 666666666
    //原因：虽然object.defineProperty 是能够做到该功能（遍历数组并为每一个元素添加object.defineProperty），但是数组过长会出现性能问题，因此提供了set方法：
    this.$set(arr,0,6666)
    //此外还可以使用vue2重写过的数组方法

    //$set 原理
    //1.先判断是不是响应式对象 使用__observer__ 判断，是则返回响应式数据
    //2.判断是不是对象 如果是对象会找到对象对应的 Observer 实例，然后根据属性是否已经存在进行不同的处理。如果属性不存在，会为属性添加 getter 和 setter ，使其成为响应式属性，并触发依赖收集。如果属性已经存在，但值发生了变化，会触发属性的 setter ，从而更新依赖
    //3.判断是不是数组，是则调用splice 方法修改值
    //4.dep.notify() 通知视图更新
}
```

vue3 proxy
原理：Vue 会创建一个 Proxy 实例来代理对象，使其成为响应式对象，当响应式对象的属性被访问或修改时，Proxy 会触发相应的拦截处理函数，这些处理函数会通知 Vue 的依赖收集系统，让其知道哪些部分的代码依赖于该属性

proxy API（共 13 个），以下为常见：
apply：调用函数之前执行； ownKeys:for in 遍历时执行； construct：new 之前执行； deleteProperty:删除之前执行......
Reflect 与 proxy 相同，也有 13 个命名一样的 api

weakMap

1. key 只能是对象
2. key 为弱引用，不能遍历且不稳定，即 key 会被垃圾回收机制回收

基于其弱引用的特点(key 在 effect 内部一直引用，因此 Map 会因此无法触发回收机制，而使用 weakMap 只要在外部不引用后则会回收)，effect 函数使用 weakMap 来存放收集的依赖