手摸手实现Mini-Observer，还原一把Vue背后的响应式（系列一）

本文链接：https://blog.csdn.net/weixin_44067347/article/details/124917259

本文深入探讨了Vue中的响应式原理，通过示例解释了响应式的基本概念，即当变量变化时，依赖该变量的结果能自动更新。文章介绍了引入Vue库和创建基础响应式示例的步骤，并讨论了如何设计一个响应式系统，核心在于监听变量变化并重新计算。总结中强调了响应式系统的本质是观察并自动更新相互依赖的变量。

摘要由CSDN通过智能技术生成

前言

随着对vue的不断使用，深入学习这门技术背后的原理也越来越重要，很多人都开启了学习vue背后的原理，本文就介绍了Vue 中实现响应式基本原理基础内容。

示例：

let x = 1;
let y = 2;
let z = x * y;
console.log('z:', z); // z: 2

延伸一下？

let x = 1;
let y = 2;
let z = x * y;
console.log('z:', z); // z: 2
x = 3;
console.log('z:', z); // 2 or 6 ?

毫无疑问~~~，2

因为 JS 是按自上而下执行的。真正让z的值变化的是 let z = x * y

当 x 变成 3 之后， let z = x * y 已经执行过去了， z的值当然也就不会发生变化了。

而所谓的响应式，就是希望 z 的值能够根据 x, y 的变化而自动变化，不管哪一个变量发生变化，结果都会自动更新。

cdn链接如下（示例）：

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Hello Vue!

Vue的核心就是采用模板语法声明式地将数据渲染到DOM。而Vue做了大量工作,将数据和 DOM 建立起来了关联关系，之后Vue中的所有东西都是响应式的了，我们如何确认呢？在控制台并修改 app.message 的值，看看基础示例是否进行了相应地更新。

在前面，我们预留了一个 ”坑“

而所谓的响应式，就是 z 的值能够根据 x, y 的变化而自动变化，不管哪一个变量发生变化，结果都会自动更新。

用通用公式写过来： z = fx(x,y)

现在的z，为什莫x已经变成3了，结果z还是2 ？因为let z = x * y执行过去了，整个过程只运行一次就结束了

我们应该怎么做？怎么告诉程序，我希望无论哪一个变量发生变化，都重新运行一次函数，从而的得到更新后的值呢？

当然是做监听了，监听这些变量的变化。时刻观察着这些变量下x,y，使得 z= watch(fx(x,y))
vue的响应式的本质上也是监听。监听的data中的数据越多，性能开销越大。

以上就是本次要讲的内容，
所谓响应式的结果就是时刻观察着相互依赖的变量项，无论哪一个发生变化，都重新运行一次函数，从而的得到更新后的值。

手摸手实现Mini-Observer，还原一把Vue背后的响应式（系列二） 正在加急生产中