如何看vue源码（vue源码在哪看）

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

本文目录一览：

• 1、【面试题解析】从 Vue 源码分析 key 的作用
• 2、怎么把vue的动态数据在查看源代码中展示
• 3、手把手教你读Vue2源码-2
• 4、vue3源码解读--data响应式的处理
• 5、vue源码分析三 -- vm._render()如何生成虚拟dom

【面试题解析】从 Vue 源码分析 key 的作用

最近看了面试题中有一个这样的题， v-for 为什么要绑定 key？

Vue 中 key 很多人都弄不清楚有什么作用，甚至还有些人认为不绑定 key 就会报错。

其实没绑定 key 的话，Vue 还是可以正常运行的，报警告是因为没通过 Eslint 的检查。

接下来将通过源码一步步分析这个 key 的作用。

Virtual DOM 最主要保留了 DOM 元素的层级关系和一些基本属性，本质上就是一个 JS 对象。相对于真实的 DOM，Virtual DOM 更简单，操作起来速度更快。

如果需要改变 DOM，则会通过新旧 Virtual DOM 对比，找出需要修改的节点进行真实的 DOM 操作，从而减小性能消耗。

传统的 Diff 算法需要遍历一个树的每个节点，与另一棵树的每个节点对比，时间复杂度为 O(n²)。

Vue 采用的 Diff 算法则通过逐级对比，大大降低了复杂性，时间复杂度为 O(n)。

VNode 更新首先会经过 patch 函数， patch 函数源码如下：

vnode 表示更新后的节点，oldVnode 表示更新前的节点，通过对比新旧节点进行操作。

1、vnode 未定义，oldVnode 存在则触发 destroy 的钩子函数

2、oldVnode 未定义，则根据 vnode 创建新的元素

3、oldVnode 不为真实元素并且 oldVnode 与 vnode 为同一节点，则会调用 patchVnode 触发更新

4、oldVnode 为真实元素或者 oldVnode 与 vnode 不是同一节点，另做处理

接下来会进入 patchVnode 函数，源码如下：

1、vnode 的 text 不存在，则会比对 oldVnode 与 vnode 的 children 节点进行更新操作

2、vnode 的 text 存在，则会修改 DOM 节点的 text

接下来在 updateChildren 函数内就可以看到 key 的用处。

key 的作用主要是给 VNode 添加唯一标识，通过这个 key，可以更快找到新旧 VNode 的变化，从而进一步操作。

key 的作用主要表现在以下这段源码中。

updateChildren 过程为：

1、分别用两个指针（startIndex, endIndex）表示 oldCh 和 newCh 的头尾节点

2、对指针所对应的节点做一个两两比较，判断是否属于同一节点

3、如果4种比较都没有匹配，那么判断是否有 key，有 key 就会用 key 去做一个比较；无 key 则会通过遍历的形式进行比较

4、比较的过程中，指针往中间靠，当有一个 startIndex endIndex，则表示有一个已经遍历完了，比较结束

从 VNode 的渲染过程可以得知，Vue 的 Diff 算法先进行的是同级比较，然后再比较子节点。

子节点比较会通过 startIndex、endIndex 两个指针进行两两比较，再通过 key 比对子节点。如果没设置 key，则会通过遍历的方式匹配节点，增加性能消耗。

所以不绑定 key 并不会有问题，绑定 key 之后在性能上有一定的提升。

综上，key 主要是应用在 Diff 算法中，作用是为了更快速定位出相同的新旧节点，尽量减少 DOM 的创建和销毁的操作。

希望以上内容能够对各位小伙伴有所帮助，祝大家面试顺利。

Vue 的文档中对 key 的说明如下：

关于就地修改，关键在于 sameVnode 的实现，源码如下：

可以看出，当 key 未绑定时，主要通过元素的标签等进行判断，在 updateChildren 内会将 oldStartVnode 与 newStartVnode 判断为同一节点。

如果 VNode 中只包含了文本节点，在 patchVnode 中可以直接替换文本节点，而不需要移动节点的位置，确实在不绑定 key 的情况下效率要高一丢丢。

某些情况下不绑定 key 的效率更高，那为什么大部分Eslint的规则还是要求绑定 key 呢？

因为在实际项目中，大多数情况下 v-for 的节点内并不只有文本节点，那么 VNode 的字节点就要进行销毁和创建的操作。

相比替换文本带来的一丢丢提升，这部分会消耗更多的性能，得不偿失。

了解了就地修改，那么我们在一些简单节点上可以选择不绑定 key，从而提高性能。

如果你喜欢我的文章，希望可以关注一下我的公众号【前端develop】

怎么把vue的动态数据在查看源代码中展示

Chrome或同内核的浏览器，使用开发者工具(f12)-network可以看到ajax请求回来的数据

手把手教你读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

vue3源码解读--data响应式的处理

目录

    vue2源码

    vue3源码

示例

源码

    上一节，我们已经看到了组件被挂载到页面的流程。但是忽略了对options的处理。vue2中是在组件init过程中就对配置项进行了合并处理，vue3中是在组件创建即setupComponent中执行applyOptions做的这个事情

    经过对组件实例的解析操作，最终拿到的dataOptions即我们实例中的data函数。可以看到，在vue3已经不允许根组件定义为对象了

    显然reactive即响应式实现的关键，顺着调用关系找到createReactiveObject函数。常听人提起的Proxy赫然立于眼前

    proxy和Object.defineProperty差不多，都可以拦截对象的访问和修改操作，那么接下来的重点就是看下它是如何做依赖收集和派发更新的即可

    当前targetType=1，使用baseHandlers做处理器，即createGetter函数。当组件render过程中将会触发msg的访问执行到此

    可以看到，如果msg是一个对象，则会递归reactive。为什么要递归处理呢？proxy不是已经把整个对象都代理到了吗？

    写一个例子看一下

        如果正常访问，我没有问题的，每次都可以正确的触发get

        如果是拿到返回值再进行访问的话，res.c就是无效的

        把第二个值也转为Proxy后就可以了

    回到正题，进入track函数

    在trackEffects中完成依赖收集

    同样的，当set newValue时将执行到createSetter。这将执行trigger进行更新派发

总结

    拿到options的data--视情况(如对象递归执行)进行reactive化--在访问时收集依赖(ReactiveEffect)--设置值时派发更新

    proxy.x相当于让activeEffect去订阅data的change，proxy.x = y则相当于data发布更新，通知activeEffect执行componentUpdateFn             --观察者模式

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源码和vue源码在哪看的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。