vue源码分析github（vue2源码分析）

今天给各位分享vue源码分析github的知识，其中也会对vue2源码分析进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、【pinia源码】一、createPinia源码解析
• 2、从源码的角度分析vue computed的依赖搜集
• 3、vue2.0源码解析（上）
• 4、vue源码分析三 -- vm._render()如何生成虚拟dom

【pinia源码】一、createPinia源码解析

【pinia源码】系列文章主要分析 pinia 的实现原理。该系列文章源码参考 pinia v2.0.14 。

源码地址：

官方文档：

本篇文章将分析 createPinia 的实现。

通过 createPinia 创建一个 pinia 实例，供应用程序使用。

createPinia 不接受任何参数，它会返回一个 pinia 实例。

源码位置： packages/pinia/src/createPinia.ts

在 createPinia 中首先会创建一个 effect 作用域对象（如果你不了解 effectScope ，可参考： RFC ），使用 ref 创建一个响应式对象。紧接着声明了两个数组 _p 、 toBeInstalled ，其中 _p 用来存储扩展 store 的所有插件， toBeInstalled 用来存储那些未 install 之前使用 pinia.use() 添加的的 plugin 。

然后声明一个 pinia 对象（这个 pinia 会使用 markRaw 进行包装，使其不会转为 proxy ），将其 return 。

这里重点看下 install 和 use 方法。

当使用 app.use(pinia) 时，触发 pinia.install 函数。在 install 中首先执行了 setActivePinia(pinia) ，它会将 pinia 赋给一个 activePinia 的全局变量。

然后会判断是不是 Vue2 环境。如果不是 Vue2 ，将 app 实例赋给 pinia._a ，然后将 pinia 注入到 app 实例，并将 pinia 设置为全局属性 $pinia 。如果此时 toBeInstalled 中有 plugins （在 install 之前添加的 plugins ），那么会把这些 plugins 添加到 pinia._p 中，添加完之后，置空 toBeInstalled 。

使用 use 方法可添加一个 plugin 以扩展每个 store 。它接收一个 plugin 参数，返回当前 pinia 。

如果 this._a 是空的，并且不是 Vue2 环境，会将 plugin 中暂存到 toBeInstalled 中，等待 install 时进行安装。否则，直接添加到 this._p 中。

你可能有疑问，在 install 、 use 中都判断了 Vue2 的情况，难道 pinia 没有处理 Vue2 的情况吗？其实并不是， pinia 提供了 PiniaVuePlugin 专门用来处理 Vue2 的情况。

如果是 Vue2 需要使用如下方式：

我们来看下 PiniaVuePlugin 的实现方式。

PiniaVuePlugin 通过向全局混入一个对象来支持 pinia 。这个对象有两个生命周期函数： beforeCreate 、 destory 。

在 beforeCreate 中设置 this.$pinia ，以使 vue 实例可以通过 this.$pinia 的方式来获取 pinia

从源码的角度分析vue computed的依赖搜集

vue 源码版本是2.6.12

很多介绍vue源码的文章对computed怎么计算值讲的很清楚，但是对computed 怎么搜集到依赖它的视图渲染watcher，以及怎么去通知对应的渲染watcher去更新讲解的很模糊或者干脆一笔带过。这篇文章主要讲解——computed watcher是怎么搜集到订阅它的渲染watcher。

文件在src/core/instance/state.js

当组件读取computed a的值的时候会执行 computedGetter函数，先是通过

计算出computed函数的值，然后通过

进行依赖搜集。

Dep.target指向当前组件的渲染watcher，进入watcher.depend()看看是怎么进行依赖搜集的

文件位于 src/core/observer/watcher.js

第一个问题：this.deps的赋值

是在cleanupDeps函数中执行this.deps = this.newDeps，所以要看cleanupDeps在哪里被调用的，以及this.newDeps中的值是哪里产生的

get函数是在computed 通过watcher.evaluate()计算值的时候被调用的，讲解下这个函数的核心操作

这个this是计算属性的watcher，调用dep.js中的

作用是放到栈顶，同时将计算属性的watcher赋值给Dep.taget

会调用 计算属性a的函数

由于引用到了i，所以会触发i的get 函数，就会调用dep.depend()，实际上是i的依赖搜集，这里的dep对象属于i

dep.depend() 位于src/core/observer/dep.js

这里的Dep.target就是上面保存的computed watcher实例，会执行watcher中的addDep，这里的this就是i的dep实例

文件位于 src/core/observer/watcher.js

做了两件事

把栈顶的watcher弹出，改变Dep.target的指向，此时指向组件的渲染watcher

这一步就是 将this.newDeps的值赋给this.deps，此时this.deps中的数组中的对象其实就是i的dep实例

再回到 watcher.depend()

this.deps[i].depend() 这里就是执行

此时Dep.target是组件的渲染watcher，所以实现的逻辑是组件渲染watcher调用addDep(this)，其实就是持有i的dep，最终被i搜集到依赖。

转了这么大一圈，实际上是为了让组件的watcher被计算属性中引用的data变量搜集到，这也不难理解，既然组件依赖computed的变化，当然也依赖computed中的值的变化，示例中computed中的值变化来自于i的变化，所以当i变化时，就让去通知计算属性的watcher去重新计算，通知组件watcher重新渲染。

对于data中变量的响应式原理和依赖搜集、派发更新可以参考我的这篇文章

从源码的角度分析Vue视图更新和nexttick机制

参考：

vue2.0源码解析（上）

vue项目地址：

当前版本号：2.6.11

1、基本目录结构：

1、找到initState()函数，这是初始化响应式的入口。

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源码分析github的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于vue2源码分析、vue源码分析github的信息别忘了在本站进行查找喔。