vue-study: 这是学习vue2、vue3的核心代码产物，包括数据响应式、依赖收集，以及数据双向绑定的原理。仅供学习参考

1、vue.use()都做了什么
接受Vue的构造函数作为参数，避免在打包时将Vue代码打包进去
创建VueRouter实例， 并且调用install
监听浏览器url的hash变化并使用响应式数据实现router-view的调用
在vue的构造函数上挂载router-view、router-link组件实现全局调用
**注意Vue的runtime是不带编译功能的不能直接编写jsx代码**
2、router-view 标签主要干了什么
通过VueRouter实例中监听hash的变化，实现调用对用的组件

3、router-link并没有全局注册为什么还能随意使用
vue.use()的时候进行了全局注册
**vue初始化方法中render > template > el**

## 理解Vue的设计思想
MVVM框架的三要素：数据响应式、模板引擎及其渲染
1. 数据响应式：监听数据变化并在视图中更新
2. 模版引擎：提供描述视图的模版语法
3. 渲染：如何将模板转换为html

## 先考虑new Vue之后都做了什么(vue2)

笼统的来说就做了组件实例化、初始话这么一个事
1. 选项合并（mergeOptions）将全局注册的组件换入到new Vue的是实例中
2. 组件是实例的一些属性方法的初始化
3. 派发两个声明周期的钩子`callHook(vm, 'beforeCreate')`和`callHook(vm, 'created')`
4. 挂载

```
initLifecycle(vm) // $parent $children 实例属性
initEvent(vm) // 事件的监听
initRender(vm) // 插槽 $slots $scopedSlots _c()/$createElement 生成vdom
callHook(vm, 'beforeCreate')
initInjections(vm) // 注入祖辈传递下来的数据
initState(vm) // 处理props/data/computed/watch/methods
initProvide(vm) // 向后代传递
callHook(vm, 'created')  
```

```
class Vue {
  constructor(options) {
    // 0.保存options
    this.$options = options;
    this.$data = options.data;
    // 1.将data做响应式处理
    new Observer(this.$data);
    // 2.为$data做代理
    proxy(this, "$data");
    // 3.编译模板
    if (options.el) {
      this.$mount(options.el);
    }
  }

// 添加$mount
  $mount(el) {
    this.$el = document.querySelector(el);
    // 1.声明updateComponent
    const updateComponent = () => {
      // 渲染获取视图结构
     const el = this.$options.render.call(this);
      // 结果追加
      const parent = this.$el.parentElement;
      parent.insertBefore(el, this.$el.nextSibling);
      parent.removeChild(this.$el);
      this.$el = el;
    };
    // 2.new Watcher
    new Watcher(this, updateComponent);
  }
}
```
创建Vue时候的时候第一时间保存的了options选项并进行了数据响应式的处理，返回的app在调用$mount进行渲染挂载

## 从实现数据响应式开始
1. Vue.set(obj, "key", "value")
set方法向obj追加key的时候要求obj必须是一个响应式数据，此方法只能用于向响应式数据中追加字段。

2. Vue.util.defineReactive(obj, "key", "value")
这个方法对obj是不是响应式数据并没有要求，通过此方法可以在obj中追加字段并且将obj变成一个响应式数据

3. 直接new Vue({ return { $$state: obj }})

可以在返回的数据直接变成响应式,这里加上$$或者加_是为了在Vue实例过程中避免vue对这个是字段进行代理，只需要做成响应式即可

**下面两个版本的代码都标记了依赖收集的入口，以便后续接入依赖收集函数，这里就不过多赘述了!不同是vue3开始是用`createApp`不在使用render的方式**

### vue2的实现方式
```
// 根据传⼊value类型做不同操作
class Observer {
  constructor(value) {
    this.value = value;
    // 判断⼀下value类型
    // 遍历对象
    this.walk(value);
  }
  walk(obj) {
    if (typeof obj !== "object" || obj === null) {
      return obj
    }
    if (Array.isArray(obj)) {
      // 覆盖原型，替换我们自己的
      obj.__proto__ = arrProtoType;
      Object.keys(obj).forEach(key => new Observer(obj[key]))
    }
    else {
      Object.keys(obj).forEach(key => defineReactive(obj, key, obj[key]))
    }
  }
}
}
// 实现对数组响应式的拦截
const methods = ["shift", "unshift", "push", "pop", "splice", "reverse", "sort"]

const arrProtoType = Object.create(Array.prototype)

methods.forEach(method => {
  // 覆盖原有数组的方法
  arrProtoType[method] = function () {
    Array.prototype[method].call(this, ...arguments)
  }
})

// 实现对象响应式拦截
const defineReactive = (obj, key, val) => {
  new Observer(val)
  // 创建dep实例和可以对应
  const dep = new Dep()
  return Object.defineProperty(obj, key, {
    get: () => {
      // 在这里做依赖收集
      Dep.target && dep.addDep(Dep.target)
      return val
    },
    set: (v) => {
      if (v !== val) {
        new Observer(v)
        val = v
        dep.notify()
      }
    }
  })
}
```

**数组实现是拦截是通过修改原型的方式来操作的**

### vue3的实现方式
```
function reactive(obj) {
  if (typeof obj !== "object" || obj === null) {
    return obj
  }
  return new Proxy(obj, {
    get(target, key) {
      // 依赖收集
      track(target, key)
      const targData =  Reflect.get(target, key)
      return typeof targData === 'object'
        ? reactive(targData)
        : targData
    },
    set(target, key, val) {
      // notify
      Reflect.set(target, key, val)
      trigger(target, key)
    }
  })
}
```
**vue3使用proxy代替defineProperty,借助proxy惰性监听的性质提高框架的性能，也修正了对于数组以及新增删除等操作的额外监听需求,因此去除了Vue.set()、Vue.delete()这样的尴尬操作**

## 依赖收集
视图中会⽤到data中某key，这称为依赖。同⼀个key可能出现多次，每次都需要收集出来⽤⼀个Watcher来维护它们，此过程称为`依赖收集`。多个Watcher需要⼀个Dep来管理，需要更新时由Dep统⼀通知。

### vue2的依赖收集
1. defineReactive时为每⼀个key创建⼀个Dep实例
2. 初始化视图时读取某个key，例如name1，创建⼀个watcher1
3. 由于触发name1的getter⽅法，便将watcher1添加到name1对应的Dep中
4. 当name1更新，setter触发时，便可通过对应Dep通知其管理所有Watcher更新
```
class Watcher {
  constructor(vm, fn) {
    this.vm = vm;
    this.getter = fn;

this.get();
  }

get() {
    // 依赖收集触发
    Dep.target = this;
    this.getter.call(this.vm);
    Dep.target = null;
  }

update() {
    this.get();
  }
}
// 管家：和某个key，⼀⼀对应，管理多个秘书，数据更新时通知他们做更新⼯作
class Dep {
  constructor() {
    this.deps = new Set();
  }
  addDep(watcher) {
    this.deps.add(watcher);
  }
  notify() {
    this.deps.forEach((watcher) => watcher.update());
  }
}
```
响应式数据构建过程中每出现一个obj，就会生成一个obsever对象，每一个key对应也有一个dep,
但是在源码中dep和watcher是属于多对多的关系，每一个组件会有一个watcher，
正常情况下一个watcher和dep是1对多，但是源码中提供了$watch("key", function(){})（也叫`useWatcher`）的方法，导致dep和watcher是属于多对多的关系

watcher和dep的关系 dep知道自己管理了哪些watcher，同样的每个watcher也知道自己被哪些dep管理，目的是提供$unwatch方法用于解绑。

### vue3的依赖收集
vue3中删除了Watcher，取而代之是effect，收集依赖的过程也有所变化；

相关api有
effect(fn)：传⼊fn，返回的函数将是响应式的，内部代理的数据发⽣变化，它会再次执⾏
track(target, key)：建⽴响应式函数与其访问的⽬标(target)和键(key)之间的映射关系
trigger(target, key)：根据track()建⽴的映射关系，找到对应响应式函数并执⾏它

```
// 临时存储副作用函数
const effectStack = []
// 1.依赖收集函数: 包装fn，立刻执行fn，返回包装结果
function effect(fn) {
  const e = createReactiveEffect(fn)
  e()
  return e
}
function createReactiveEffect(fn) {
  const effect = function () {
    try {
      effectStack.push(fn)
      return fn()
    } finally {
      effectStack.pop()
    }
  }
  return effect
}

// 保存依赖关系的数据结构
const targetMap = new WeakMap()

// 依赖收集：建立target/key和fn之间映射关系
function track(target, key) {
  // 1.获取当前的副作用函数
  const effect = effectStack[effectStack.length - 1]
  if (effect) {
    // 2.取出target/key对应的map
    let depMap = targetMap.get(target)
    if (!depMap) {
      depMap = new Map()
      targetMap.set(target, depMap)
    }

// 3.获取key对应的set
    let deps = depMap.get(key)
    if (!deps) {
      deps = new Set()
      depMap.set(key, deps)
    }

// 4.存入set
    deps.add(effect)
  }
}

// 触发更新：当某个响应式数据发生变化，根据target、key获取对应的fn并执行他们
function trigger(target, key) {
  // 1.获取target/key对应的set，并遍历执行他们
  const depMap = targetMap.get(target)

if (depMap) {
    const deps = depMap.get(key)
    if (deps) {
      deps.forEach(dep => dep())
    }
  }
}
```

vue最早是一个key对应一个watcher，但是随着项目和组件的体积增大，这种方式内存消耗也很大，所以不适用大项目，因此在后来的升级中引入了虚拟dom和diff算法

## 虚拟dom
虚拟DOM（Virtual DOM）是对DOM的JS抽象表示，它们是JS对象，能够描述DOM结构和关系。应用的各种状态变化会作用于虚拟DOM，最终映射到DOM上。

### 优点：
1. 轻量、快速：当他们发生变化的时候时通过新旧DOM比对可以得到最小DOM操作量，配合异步更新策略减少更新频率，提高性能
2. 跨平台：将虚拟DOM更新转换不同运行时特殊操作实现跨平台
3. 兼容性：还可以加入兼容性代码，增强操作的兼容性

### 必要性
vue 1.0中有细粒度的数据变化侦测，它是不需要虚拟DOM的，但是细粒度造成了大量开销，这对于大型项目来说是不可接受的。因此，vue 2.0选择了中等粒度的解决方案，每一个组件一个watcher实例，这样状态变化时只能通知到组件，再通过引入虚拟DOM去进行比对和渲染。

## patch、diff

## vue中$nexttick(异步渲染）实现过程中异步降级
先是promise.then
其次是MutationObsever
然后setImmediate
最后是setTimeout

## vue3

vue2升级到vue3的动机
1. 类型支持更友好
2. 有利于tree-shaking
3. API简化、一致性：render函数、sync修饰符、指令等
4. 复用性：composition API
5. 性能优化：响应式、编译优化
6. 扩展性：自定义渲染器

在vue3中setup的优先级是最高的

## 编译器(compiler)

1. 编译器的作用将是生成渲染函数，将模板进行编译、解析
2. 执行时刻需要区分不同的使用环境
   
  runtime-compiler
  步骤：template --> ast --> render函数 --> vdom --> 真实DOM
  优点：可以使用template选项，选择更灵活
  执行时机：在vue.$mount()挂载的时候执行

runtime-only
  步骤：render函数 --> vdom --> 真实DOM
  优点：体积小、运行速度快
  执行时机：使用webpack的vue-loader进行预编译
  
### 编译器的优化策略

1. 静态节点提升
   将静态节点进行缓存，用内存换时间

2. 补丁标记和动态属性记录(patchFlag)
   只关注节点动态变化的部分，对其进行标记，下次更新的时候只更新能变化的部分

3. 缓存事件处理程序
   缓存事件，避免直接书写事件函数导致的不必要更新，直接写箭头函数，会会导致每次编译到这里的时候都会生成新的函数，使得子树更新，缓存以后即可避免，功能类似于react的useCallback.

4. 块 block
   将模板切分成块，将动态的节点进行保存，这样下次更新就不需要遍历整棵树，而是对保存的动态节点进行遍历即可，降低复杂度。

*注意：* 
1. jsx转换过程中也会生成ast，有区别的是jsx本质还是js，没有进行预编译，那么所携带的信息会很少。所以理论上vue中的jsx也不能享受到`完整优化策略`带来的性能提升。
2. vue也好，react也好，他们都用到了ast，但是它们都会自己单独维护自己的规则。

### 编译器的调试

在vue3源码中[package.json](https://github.com/vuejs/core/blob/main/package.json)中找到`dev-compiler`命令并执行，之后框架会在`packages/template-explorer`这个包下面输出一个dist文件，这个文件出现说明编译成功，我可以直接查看`packages/template-explorer`包下的`local.html`，直接在浏览器中打开即可调试。

machinist_wq/vue-study

简介

发行版

贡献者

近期动态

machinist_wq/vue-study .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

machinist_wq/vue-study