js通过defineProperty实现简单响应式

 通过input框输入文本，修改页面中由js对象中取得的文本，通过input事件取得输入的数据，并将取得的值赋值给页面获取数据的对象属性。

<h1></h1>
    <input type="text" oninput="modifyData(this.value)">

  let data = {
            msg: 'msg默认值'
        }
//获取h1的DOM对象
 let h1Dom = document.querySelector('h1')
//插入文本
 h1Dom.innerText = data.msg
//修改对象中的数据
 function modifyData(v) {
            data.msg = v
        }

 接下来就是实现由input框传入的值修改对象中的msg，完成页面的同步响应。

实现这一步主要使用Object.defineProperty(）方法中的get()和set()方法，其中get()方法主要用于定义属性的取值操作拦截回调函数,该函数的返回值为描述属性的取值；set()方法用于定义属性的赋值操作拦截回调函数,通过定义该函数的执行体完成当前属性值的修改，该方法存在一个newValue形参。

 let _data = data
 data = {}
 Object.defineProperty(data, 'msg', {
            enumerable: true,
            configurable: true,
            get() {
                return _data.msg
            },
            set(newValue) {
                _data.msg = newValue
                h1Dom.innerText = _data.msg
            }
        })

这就实现了一个简单的响应式功能