·Vue2.×版本与Vue3.×版本的响应式实现有所不同，

    ·Vue2.x响应式基于ES5的Object.defineProperty实现。

    ·Vue3.×响应式基于ES6的Proxy实现。

    <!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> <script> var obj = { name:‘william’, age:18 } // Object.defineProperty() 操作演示与回顾 /* Object.defineProperty(obj, ‘gender’, { value: ‘男’, writable: true, enumerable: true, configurable: true }) Object.defineProperty(obj, ‘gender’, { enumerable: false }) for (var k in obj) { console.log(k, obj[k]) } */ //通过第三个数据genderValue存值 var genderValue = ‘男’ Object.defineProperty(obj, ‘gender’, { get () { console.log(‘任意获取时需要的自定义操作’) return genderValue }, set (newValue) { console.log(‘任意设置时需要的自定义操作’) genderValue = newValue } }) </script> </body> </html>