vue底层原理知识点梳理

60 阅读 0 评论 40 点赞

我是靠谱客的博主奋斗舞蹈，最近开发中收集的这篇文章主要介绍vue底层原理知识点梳理，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

考完蓝桥杯后的最近这段时间里，在继续学习vue底层相关的知识。东西不少，而且有点复杂，感觉自己虽然看了不少文章和视频，但是学习到的还是比较浅层的知识，这篇文章就先对我学过的知识点进行一下大致的梳理吧。

1.虚拟dom

（1）虚拟dom即非真实的dom，它并非一个dom树，可以将它看做一个js对象，将dom树的结构转换为一种特定的格式的对象。

（2）使用虚拟dom并不会比直接改真实dom更快，反而因为中间加了虚拟dom这一步骤而让过程变慢，真正优化其性能的是因为虚拟dom的存在，可以将原先每次更改重新渲染页面的过程改为了多次更改完成后统一重新渲染，而diff算法的存在进一步优化了这一步骤，因为diff算法，将新旧dom中都存在的对象移动到对应位置，新dom有旧dom没的新建，旧dom有新dom没的删除。减少了加载相同对象的过程。

（3）在使用的时候要注意，尽量不要把key值设为index，因为在diff算法的过程中，一旦在开头加一个新对象，所有对象的key值都要变，diff算法有根据key值判断是否为同一对象的过程，这样一来就会加大工作量，让程序更慢。

（4）虚拟dom和ast的区别：虚拟dom和ast即抽象语法树，都涉及到了页面渲染，刚开始学习的时候我经常将两者混淆，其实两者是截然不同的概念。两者都是使用对象来进行抽象表示，但是虚拟dom是将真实dom以对象的方式进行抽象表示，而ast则是对语法结构的抽象表示。

2.数据响应式

（1）关于数据响应式的最基础的概念就是Object.defineProperty()，它的作用是给对象加上属性。在数据响应式里，是通过它来给函数加上getter和setter，有了这俩才能对数据进行读取和修改。

（2）监听器observe对数据进行了劫持监听，当监听到数据的变化的时候，就通过set方法把变化的数据传递给订阅器Dep。然后订阅器Dep将数据的变化通知给订阅者Watcher，watcher接收到数据的变化后就开始更新视图。在这里，我们为了实现这一操作，就要求Watcher至少有两个函数，一个是将自己添加到Dep中的函数，在订阅者Watcher初始化的时候触发对应的get函数去执行添加订阅者操作。一个是自己的更新的函数，只有有了这个函数，当Dep通知Watcher的时候，才能进行更新。

（3）解析器Compile,解析器可以解析模板指令，并替换模板数据，初始化视图。然后将模板指令对应的节点绑定对应的更新函数，初始化相应的订阅器。为了避免频繁的操作引起页面回流，使用了DocumentFragment方法来暂存数据，将需要解析的dom节点存入fragment里再进行操作，之后遍历各个节点，对所有子节点进行判断，找到对应的节点之后，进行编译处理。

（4）vue中的双向绑定，其实就可以看做数据响应式的一种应用，只是给input多加了一个oninput属性，在改变的时候执行了对应的函数。

3.模板编译

说实话模板编译到现在还是比较迷糊，在这里我先尽量把自己理解的写出来吧。

（1）模板编译这一步骤分为解析器，优化器，代码生成器。

（2）解析器步骤是将html解析为AST，就是前面提到过的抽象语法树。先循环遍历，处理每一个标签如开始标签、结束标签、文本节点和注释节点，然后再处理标签上的一些属性，如v-bind、v-for、v-if、key等等。

（3）解析完成之后，会遍历AST标签，将其中的文本节点，没有v-bind、v-for、v-if这些属性的节点，非组件标记为静态节点，因为这些是不会改变的，因此每次更新的时候可以跳过，虚拟dom也可以将这些静态节点忽略，从而提高性能，这也是优化器这一步骤的功能。

（4）代码生成器这一块主要是AST通过render函数实现的，而渲染函数render生成的过程，其实就是在遍历 AST 节点，通过递归的方式，处理每个节点。整个渲染过程分为三步，首先是调用compile函数，生成render函数字符串，然后调用new Watcher函数进行监听，变化时更新render 函数生成vnode，最后调用patch()方法，比较新旧节点，通过diff算法,将虚拟dom变为真实dom，然后更新视图。