那些Vue开发遇到的坑响应式系统 [复制链接]

VUE响应式浅析

那些年VUE

开发遇到的坑

Vue是目前使用较为广泛的前端框架之一。相比React，Vue更容易学习上手。毕竟在React中万物皆JavaScript。这让一些习惯于编写HTML+JavaScript的程序员不太乐于接受。相比之下，Vue的模板语法它不香么。

当然，Vue同样支持类似于JSX的语法的渲染函数，但是相信我，只要你学了模板语法，你就会放弃渲染函数。

有的同学可能会提到AngularJS，这里就要说道，Vue的一些语法设计的确参考了AngularJS，但是Vue的API设计相对AngularJS要简单的多，学习成本更低。

而且，Vue在设计过程中解决了很多AngularJS存在的问题，包括Vue对数据流的控制都会让你的代码更加清晰易懂，让你可以在使用框架或者阅读别人代码的时候少说几句F**k（这个不完全保证）。

虽然Vue上手容易，但这并不代表你可以轻而易举的完全掌握它，要想真正了解并熟练这个框架，它的一些底层原理还是要了解一二的，这同样有助于开阔你的编程思路。今天我们就先介绍一下Vue最独特的特性之一--------响应式系统（这句话是抄官方的）。

Vue的响应式指的是你在一个页面中展示了一个变量的值，当这个变量的值由于一些操作发生改变时，Vue会自动在无需刷新界面的前提下帮你把新的值展示到相应的位置，当然这个过程不需要你自己写任何的dom刷新渲染的代码（我觉得我说的够通俗易懂了，再看不懂，请你去看尤雨溪的官方解说，保证你更看不懂）。

为了实现这一效果，Vue做了很多你不知道的事（不然怎么会不用你写一行代码，因为他们替你写了）。接下来的解说涉及一些Vue和JavaScript的基础知识，比如Object.defineProperty等，不太了解的同学请复制Object.defineProperty并打开浏览器粘贴到检索栏按下回车看看这到底是啥。

虽然Vue3版本弃用defineProperty改用proxy，但是响应式系统的主要思路还是没有变的，所以此处提到的defineProperty是Vue2的实现方法，这点请小伙伴们注意哦。

VUE·响应式原理

一个Vue实例具备一个名为data的数据对象，对象中包含了当前Vue实例所需要的数据，当一个Vue实例生成时，Vue的响应式系统会递归的将data的property通过Object.defineProperty转换为getter/setter。

你可以理解为响应式系统对每一个实例数据绑定了getter/setter函数，要获取数据需要通过调用getter函数，为数据写入新值则需要调用setter函数。

每一个Vue实例还对应一个watcher实例（看名字就是知道这是拿来监听的）。这个watcher实例会记录与它对应的Vue实例的所接触过的所有数据。在此之后如果某条数据发生改变，那么必将通过setter函数去设置新值，这时watcher会监听到这一变化，然后通知用到这个数据的Vue实例进行重新渲染，更新新值到页面上，整个流程如下图：

引自：