Vue响应式原理解析（Vue2.x和3.x及区别）

我们都知道在Vue.js中，MVVM相对传统的DOM操作，有一个很大的优点就是能实现数据的双向绑定。

先用代码来体验一下：

<div id="app">
        {
   {
   message}} {
   {
   name}}
    </div>
    <script src="vue.js"></script>
    <script>
        const app = new Vue({
   
            el: '#app',
            data: {
   
                message: 'Hello',
                name: 'vue'
            }
        })
    </script>

运行结果：

现在来改变一下其中的一个数据，在控制台输入app.name = ‘world’ ，我们可以看到此时运行结果变成了：

要理解Vue是如何实现数据双向绑定的，就要搞懂两个问题：

①app.name修改数据，Vue内部是如何监听name数据的改变的？

②当数据发生改变时，Vue是如何知道要通知谁，并且实现界面刷新？

---

我们先来解决第一个问题。

在ES5中有一个Object.defineProperty()方法，能监听各个属性的get和set方法（也称为数据劫持&#x