Vue 的响应式原理是核心是通过 ES5 的保护对象的 Object.defindeProperty 中的访问器属性中的 get 和 set 方法，data 中声明的属性都被添加了访问器属性，当读取 data 中的数据时自动调用 get 方法，当修改 data 中的数据时，自动调用 set 方法，检测到数据的变化，会通知观察者 Wacher，观察者 Wacher自动触发重新render 当前组件（子组件不会重新渲染）,生成新的虚拟 DOM 树，Vue 框架会遍历并对比新虚拟 DOM 树和旧虚拟 DOM 树中每个节点的差别，并记录下来，最后，加载操作，将所有记录的不同点，局部修改到真实 DOM 树上。
虚拟DOM (Virtaul DOM): 用 js 对象模拟的，保存当前视图内所有 DOM 节点对象基本描述属性和节点间关系的树结构。用 js 对象，描述每个节点，及其父子关系，形成虚拟 DOM 对象树结构。
简单实现vue双向数据绑定：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input id="inp" type="text"> <span id="spanEle"></span> </body> <script> let inpEle = document.getElementById('inp'); let spanEle = document.getElementById('spanEle'); inpEle.addEventListener('input', function () { data.name = inpEle.value; }) function render() { spanEle.innerHTML = JSON.stringify(data); } let data = { name: '请输入你的姓名', location: { x: 100, y: 100 } } inpEle.value = data.name; observe(data) function observe(obj) { // 数据劫持 // 判断类型 if (!obj || typeof obj !== 'object') { return } Object.keys(obj).forEach(key => { defineReactive(obj, key, obj[key]) }) function defineReactive(obj, key, value) { // 递归子属性 observe(value) Object.defineProperty(obj, key, { enumerable: true, //可枚举（可以遍历） configurable: true, //可配置（比如可以删除） get: function reactiveGetter() { console.log('get：', value) // 监听 return value }, set: function reactiveSetter(newVal) { observe(newVal) //如果赋值是一个对象，也要递归子属性 if (newVal !== value) { value = newVal render() console.log('set：', newVal) // 监听 } } }) } } setTimeout(() => { data.location = { x: { xx: { xxx: 2020 } }, y: 2020 } console.log(data.name); }, 1000) setTimeout(() => { data.location.x.xx.xxx = 0823; }, 4000) </script> </html>