本篇文章给大家谈谈vue源码分析视频教程，以及vue源码解析 github对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、Vue 组件创建的流程源码分析
• 2、Vue.js 源码剖析-响应式原理、虚拟 DOM、模板编译和组件化
• 3、手把手教你读Vue2源码-2
• 4、vue源码分析三 -- vm._render()如何生成虚拟dom
• 5、【手把手教你搓Vue响应式原理】（五） Watcher 与 Dep

Vue 组件创建的流程源码分析

注册组件第二个参数默认会调用extend,Vue.extend 使用Vue基础构造器 产生子类

Vue.extend() 中data必须是一个函数，继承与Vue,可以new和挂载

Vue.component("",Vue.extend({})) //传入的是对象

这样复用了同一个对象所以改写为,这样new的时候可以拿到全新的对象

因为new Fn的constructor指向的是Parent，所以Sub.prototype需要重写

———————————————— 分割线 ————————————————————

所以在createElement，需要对组件进行处理（要区分组件和普通元素去创建虚拟节点）

判断是不是原始的标签 还是组件的方法

Vue.js 源码剖析-响应式原理、虚拟 DOM、模板编译和组件化

npm run build

使用vue-cli创建的项目默认导入的是运行时版本并且是ESM模块化方式

核心： 把会改变数组的方法进行修补，当这些方法被调用的时候调用notify方法，遍历数组中的元素，把对象元素进行响应式处理

Watcher分为三类，Computed Watcher， 用户Watcher(监听器)，渲染Watcher

模板编译的主要目的是将模板转换为渲染函数

手把手教你读Vue2源码-2

在上一篇中，我们已经学习了怎么搭建环境和查找入口文件、vue初始化方法

这一篇，我们就来学习基本的调试方法，在上篇中，我们已经在test文件夹中创建了一个测试文件，我们在浏览器中打开这个文件

1. 初始化new Vue()

test1.html文件中在初始化app处打断点，按F11走下一步查看，可以看到进入到我们Vue构造函数，调用了init方法

2. this.init(options)

同样打上断点，点击下一步，会进入init方法

3. this.initMixin

在init方法，初始化了各种属性。我们将断点打在合并options的位置，查看一下options合并前后有什么差别：

4. $mount

继续，将断点打到mount方法

5. mountComponent

声明了updateComponent，创建了Watcher

6. _render()

_render获取虚拟dom

7. _update()

_update把虚拟dom转为真实dom

vue源码分析三 -- vm._render()如何生成虚拟dom

我们在上一篇的最后讲解了vm._render是生成虚拟dom的关键，那么我们来看看他是如何生成的，下面是他的源码

createElement在文件../vdom/create-element里面，下面是他的源码

new Vnode 创建的是一个虚拟dom，其实就是一个装有很多属性的对象，和真实的dom做一个映射，目的是去渲染真实的dom，那么为什么不直接去渲染dom，因为vue中dom不仅有create的过程，还有diff,patch的过程。为了使得diff的过程花费的时间更短，虚拟dom就出来了，下面我们来看看new Vnode的源码

【手把手教你搓Vue响应式原理】（五） Watcher 与 Dep

【手把手教你搓Vue响应式原理】（一）初识Vue响应式

【手把手教你搓Vue响应式原理】（二）深度监测对象全部属性

【手把手教你搓Vue响应式原理】（三）observe 以及 ob

【手把手教你搓Vue响应式原理】（四） 数组的响应式处理

之前已经将数据劫持已经全部完成了。

那么，接下来，主要的要点就是在于两点，依赖收集和触发依赖更新。

它的意义主要在于控制哪些地方使用了这个变量，然后，按照最小的开销来更新视图 。

首先，要先明白，依赖是什么，比方说在我们的模板中有 {{a}} ，那么，这个地方就有对于变量 a 的依赖。

在模板编译的时候，就会触发 a 变量的 getter 。

然后，当我们执行 a++; 的时候，那么，我们就要触发依赖的更新，当初模板中 {{a}} 的地方，就要更新，是吧！

所以，我们都是 在 getter 中收集依赖，在 setter 中触发依赖更新 。

这一节的内容，主要就是用来专门讲清楚这两件事情。

依赖收集和触发依赖更新主要由两个类来完成， Dep 和 Watcher 。

Dep 和 Watcher 在设计模式中，就是 发布-订阅者 的模式。

而依赖，你可以理解为所谓的订阅者。

Dep 说白了就是发布者,它的工作就是依赖管理，要知道哪些地方用到了这个变量，可能用到这个变量的地方有很多，所以，它会有多个订阅者。

然后，每个变量都应该有属于自己的 Dep ，因为每个变量所在的依赖位置是不一样的，所以他们的订阅者也不一样。

然后在变量更新之后，就去通知所有的订阅者（Watcher），我的变量更新了，你们该触发视图更新了。

Watcher 说白了就是订阅者，它接受 Dep 发过来的更新通知之后，就去执行视图更新了。

它其实就是所谓的 watch 监听器，变量改变之后，执行一个回调函数。

我们先按照图例来创建我们的 Dep 类

根据我们的需求:

Dep 我们在前面也说了，每个属性都应该有它自己的 Dep ，用来管理依赖。

所以，首先，如果我们在 Observer 中创建 Dep，那不就可以了。毕竟 Observer 会遍历到每一个对象。

所以，很明显，我们可以在 defineReactive 的 get 中收集依赖

因为有了 if(Dep.target) 的判断，所以， 只有绑定 Watcher 的变量触发 getter 时，才会添加依赖 。

这个 Dep.target 其实就是 Watcher 的实例

所以，很明显，我们可以在 defineReactive 的 set 中收调用 notify() 方法告知 Watcher 实例，数据更新了。

至此， Dep 的所有职责，我们已经帮它完成了。

其实照道理应该有一个删除依赖，我们这里就不再扩展了。

首先， Watcher 实例应该大家会相对而言更加好理解点，因为，我们有一个 watch 侦听器，大家一定都很熟悉，这两个其实一样。

我们先按照图例来创建我们的 Watcher 类

根据我们的需求:

这个 parsePath 需要单独拎出来说一下，比方说我们现在有这么一个对象

我们要监听到 a.b.c.d ，所以，我们需要下面的这种格式

所以，这个 get 很明显就有点难度了。 我们需要通过循环 拿到 a.b 然后 .c 然后 .d。

我们将这个方法命名为 parsePath 。

入参接受我们的 b.c.d ，我们可以看到 第一句执行之后 segments=['b','c','d'] ，然后进行第二层，这是返回了一个方法，按照循环，那就是 obj=obj.b = obj=obj.c = obj=obj.d ，所以，就是返回一个对象的 obj.b.c.d，相当于是遍历字符串中的属性树。

在执行 a.b.c.d=55; 的同时，我们的控制台就会输出 ok 55 10 。

【尚硅谷】Vue源码解析之数据响应式原理

关于vue源码分析视频教程和vue源码解析 github的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。