·Vue2.×的数据响应式通过Object.definePropertyO实现的

    ·设置data后，遍历所有属性，转换为Getter、Setter，

    从而在数据变化时进行视图更新等操作。

    下面我们来通过一段代码实现数据绑定的基础效果

    ·数据变化，自动更新到视图

    <!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> <div id=“app”>原始内容</div> <script> // 声明数据对象，模拟 Vue 实例的 data 属性 let data = { msg:‘hello’ } // 模拟 Vue 实例的对象 let vm = {} // 通过数据劫持的方式，将 data 的属性设置为 getter/setter Object.defineProperty(vm, ‘msg’, { // 可遍历 enumerable:true, // 可配置 configurable:true, get () { console.log(‘访问了属性’) return data.msg }, set (newValue) { // 更新数据 data.msg = newValue // 数据更改，更新视图中 DOM 元素的内容 document.querySelector(‘#app’).textContent = data.msg } }) </script> </body> </html>