原文地址：How Reactivity works in Vue.js
在前端开发人员的世界中，“响应式”是每个人都使用的东西，但很少有人能理解。 确实，这不是谁的错，因为每个人在编程中对响应式的定义不同。 因此，在开始之前，我只给您一个有关前端框架的定义。
“ JavaScript框架之间的响应式是一种应用程序状态的更改自动反映在DOM中的现象。”
Vue.js中的响应式
Vue.js中的响应式是附带了包里的一些东西。
这是Vue.js中具有双向绑定（使用v-model）的示例，
在上面的示例中，您可以清楚地看到数据模型层中的更改，
new Vue({
el: "#app",
data: {
message: ""
},
})
自动反映在视图层中
<div id="app">
<h1>Enter your message in the box</h1>
<p>{{ message }}</p><br>
<input placeholder="Enter message" v-model="message" />
</div>
如果您熟悉Vue.js，那么您可能已经习惯了。 但是，您必须记住，香草JS中的工作方式不同。 让我用一个例子来解释它。 在这里，我在vanilla JS中重新创建了上面的Vue.js响应式示例。
您可以在此处看到JavaScript不是自然反应的，因为当您输入消息时，您不会在HTML视图中看到该消息自动重新渲染。 为什么会这样呢？ Vue.js是做什么的？
好吧，要得到答案，我们必须了解其潜在的反应系统。 一旦我们有了一个清晰的了解，我们将尝试使用vanilla JavaScript重新创建我们自己的反应系统，该系统类似于Vue.js响应式系统。
Vue.js响应式系统
让我从头为您分解一下
第一次渲染
在第一次渲染上，如果“触达”了数据属性（将访问数据属性称为“触达”该属性），则会调用其getter函数。
Getter：getter函数调用监视程序的目的是为了收集此数据属性作为依赖项。
（如果data属性是一个依赖项，则意味着每次此属性的值更改时，某些目标代码/函数都将运行。）
观察者
每当调用观察程序时，它都会将该数据属性添加为从调用它的getter的依赖项。 观察者还负责调用组件渲染函数。
组件渲染函数
实际上，Vue的组件渲染功能并不是那么简单，但是为了理解起见，我们只需要知道它会返回具有更新数据属性的Virtual DOM Tree，该虚拟DOM树就会显示在视图中。
数据变化！
这部分，基本上是Vue.js中反应性的核心。 因此，当我们对数据属性（作为依赖项收集）进行更改时，将调用其setter函数。
Setter：setter函数在数据属性的每次更改时通知观察者。 我们已经知道，观察者运行组件渲染功能。 因此，在data属性中所做的更改将显示在视图中。
我希望您现在可以清楚该工作流程，因为我们将在原始JavaScript中重新创建此响应式系统。
在vanilla JavaScript中重新创建Vue.js响应式系统
现在，我们正在重新创建响应式系统，最好的方法是一对一地理解其构建块（以代码形式），最后我们可以组装所有的系统，
数据模型
任务：首先，我们需要一个数据模型
解决方案：
我们需要什么样的数据？ 由于我们正在重新创建我们先前看到的Vue示例，因此我们将需要一个完全像它的数据模型。
let data = {
message: ""
}
一个目标函数
任务：我们需要有一个目标函数，一旦数据模型发生更改，将运行该函数。
解决方案：
解释目标函数是什么的最简单方法，
“嗨，我是一条数据属性消息，我有一个目标函数renderFunction（）。 每当我的值改变时，我的目标函数就会运行。
PS：我可以有多个目标函数，而不仅仅是renderFunction（）”
因此，我们声明一个名为target的全局变量，该变量将帮助我们为所有数据属性记录一个目标函数。
let target = null
依赖类
任务：我们需要一种收集数据属性作为依赖的方法
到目前为止，我们只有数据和目标函数的概念，它们在数据值更改时运行。 但是，我们需要一种方法来分别记录每个数据属性的目标函数，以便当数据属性发生更改时，只有那些针对该数据属性分别存储的目标函数才会运行。
解决方案：
我们需要为每个数据属性的目标函数提供一个单独的存储空间。
假设我们有以下数据，
let data = {
x: '',
y: ''
}
然后，我们要为x和y提供两个单独的存储。 那么，为什么不只定义一个Dependency类，每个数据属性也可以有其唯一的实例呢？
这可以通过定义一个Dependency类来完成，以便每个数据属性都可以拥有自己的Dependency类实例。 因此，可以为目标功能分配每个数据属性自己的存储空间。
class Dep {
constructor() {
this.subscribers = []
}
}
依赖类具有订户数组，该数组将用作目标函数的存储。
现在，我们还需要做两件事来使Dependency类完全完成，
- depend（）：该函数将目标函数推入订阅者数组。
- notify（）：此函数运行存储在订阅服务器数组中的所有目标函数。
class Dep {
constructor() {
this.subscribers = []
}
depend() {
// Saves target function into subscribers array
if (target && !this.subscribers.includes(target)) {
this.subscribers.push(target);
}
}
notify() {
// Replays target functions saved in the subscribers array
this.subscribers.forEach(sub => sub());
}
}
追踪变化
任务：我们需要找到一种方法，只要该属性发生更改，就可以自动运行该属性的目标函数。
解决方案：
到现在为止，我们已有，
- 数据
- 数据更改时会发生什么
- 依赖收集机制
下一步我们需要的是，
- 一种在“触达”数据属性时触发depend()的方法。
- 一种跟踪数据属性中的任何更改然后触发notify()的方法。
为了实现这一点，我们将使用getter和setter。 Object.defineProperty（）允许我们为此类任何数据属性添加getter和setter，
Object.defineProperty(data, "message", {
get() {
console.log("This is getter of data.message")
},
set(newVal) {
console.log("This is setter of data.message")
}
})
因此，我们将为所有可用的数据属性定义getter和setter，
Object.keys(data).forEach(key => {
let internalValue = data[key]
// Each property gets a dependency instance
const dep = new Dep()
Object.defineProperty(data, key, {
get() {
console.log(`Getting value, ${internalValue}`)
dep.depend() // Saves the target function into the subscribers array
return internalValue
},
set(newVal) {
console.log(`Setting the internalValue to ${newVal}`)
internalValue = newVal
dep.notify() // Reruns saved target functions in the subscribers array
}
})
})
另外，您可以在上方看到在getter中正在调用dep.depend（），因为当“触达”数据属性时，将调用其getter函数。
我们在setter内部具有dep.notify（），因为当该数据属性的值发生更改时，将调用setter函数。
观察者
任务：我们需要一种方法来封装当数据属性的值更改时必须运行的代码（目标函数）。
解决方案：
到目前为止，我们已经创建了一个系统，在该系统中，数据属性在被“触达”时立即作为依赖项添加，并且如果该数据属性有任何更改，则将执行其所有目标函数。
但是，仍然缺少一些东西，我们还没有使用目标函数的任何代码来初始化该过程。 因此，为了封装目标函数的代码然后初始化该过程，我们将使用观察者。
观察者是一个函数，它将另一个函数作为参数，然后执行以下三个操作：
- 将匿名函数的参数赋值给全局目标变量。
- 运行target（）。 （这样做会初始化过程。）
- 重新分配 target = null
let watcher = function(func){
// Here, a watcher is a function that encapsulates the code
// that needs to recorded/watched.
target = func // Then it assigns the function to target
target() // Run the target function
target = null // Reset target to null
}
现在，如果我们将一个函数传递给观察者，然后运行它，那么自适应系统将完成初始化的过程。
let renderFunction = () => {
// Function that renders HTML code.
document.getElementById("message").innerHTML = data.message;
}
watcher(renderFunction);
然后，我们完成了！
现在，组装以上所有代码，我们已经成功地使用原始JavaScript重新创建了Vue.js响应式系统。 这是我使用此响应式系统向您展示的第一个示例的实现，