每天学一点，开车更稳哦~
老生常谈vue双向绑定怎么实现的？~~~~晕菜 ，自己的一点小理解~
首先我们先来拿input举例子：
<input id='text' />
<div id='app'></div><script>
function updated() { document.getElementById("app").textContent = data.text } updated() //1.绑定input事件，在数据更新后更新视图 var textElm = document.getElementById('text') textElm.value=data.text textElm.addEventListener('input',function(){ data.text =this.value updated() })
</script>
这样此刻利用input完成数据实时通讯，但是不能直接改变,接下来我们将input取消,
监听数据 实现数据监听 ---objecet.definedProperty
/*
Object.defineProperty(obj, prop, descriptor) 接收三个参数，obj：要定义属性的对象，prop：要定义或修改的名称，可以srting或symbol descriptor:要定义或修改的属性描述符，必须是object
*/
<div id='app'></div>
<script>
var data = { text: "hello" } function updated() { document.getElementById("app").textContent = data.text }
var text = data.text Object.defineProperty(data, 'text', { get: function () { return text }, set: function (newValue) { console.log(newValue, 44) if (text !== newValue) { text = newValue updated() } } }) //实现更新 set get
</script>
~~嗯哼~搞定喽，但是小伙伴们，这个可不是详细的，只是和大家捋一下思路，大概思路哦，
具体的写法还是要参考文档呢~~
Vue3.0好恐怖哦，还在2.0挣扎的我要怎样接受3.0？晕菜，但还是要努力哦
3.0将 Object.defineProperty替换为proxy 我们先来看了解proxy用法
const proxy = new Proxy(targer, handle)
** target**: 需要代理的目标对象。可以是任何类型的对象，包括原生数组，函数，甚至另一个代理
**handler**: 以函数作为属性的对象。属性中的函数分别定义了在对 proxy 实例执行各种操作的自定义行为
**handelr** 对象支持的方法（通常被称为traps，中文翻译为陷阱，可以理解为钩子或者执行某项操作的回调函数）有：
**get**: 读取属性值时调用
**set**: 对属性赋值时调用
**has**: 使用in操作符时调用
**deleteProperty**: 使用delete操作符时调用
**ownKeys**: 使用Object.getOwnPropertyNames方法和Object.getOwnPropertySymbols方法时调用
**apply**: 函数调用操作时调用
**construct**: 使用new操作符时调用
**defineProperty**: 使用Object.defineProperty方法时调用
**getOwnPropertyDescriptor**: 使用Object.getOwnPropertyDescriptor方法时调用
**getPrototypeOf**: 使用Object.getPrototypeOf方法时调用
**setPrototypeOf**: 使用Object.setPrototypeOf方法时调用
**isExtensible**: 使用Object.isExtensible方法时调用
**preventExtensions**: 使用Object.preventExtensions方法时调用
可以看到Proxy对对象自定义行为的控制比Object.defineProperty更加全面。这里，我们重点关注和后者相同部分，即get和set。虽然名称都是get和set，但方法的传参不同。Object.defineProperty是针对对象的某个属性定义get和set，而Proxy是针对整个对象。并且通过Proxy构造函数返回的是一个proxy实例，而不是原对象。因此，Proxy中的get和set参数比Object.defineProperty的多了两个参数：
**obj**: 要代理的目标对象，即 target
**key**: 代理对象访问或设置的属性
接下来我们根据以上api进行写入代码：
<div id='app'></div>
<script>
var data = { text: 'hello' }
function reactive(target, update) { var targetProxy = new Proxy(target, { get(obj, key) { return obj[key] }, set(obj, key, newValue) { obj[key] = newValue //表示成功 update() return true } }) return targetProxy } var dataProxy = reactive(data, update) function update() { document.getElementById('app').textContent = dataProxy.text } update()
</script>
看逻辑貌似是一样的欸~~
了解Proxy与Object.defineProperty的具体操作 ，看到有很多大佬已经给出了具体的指示，我只作为一个前端的小菜鸟，我自己的学习思路在这里记录下来，还是希望能够得到大佬的指点~~
