1. 双向指的是什么 所谓的双向绑定指的是 数据M和视图V之间的相互影响

    2. 数据 => 视图 通过Object.defineProperty劫持数据 数据的变化我们就可以同步到视图中

    3. 视图 => 数据 监听事件触发 在事件的回调函数中 拿到用户输入的最新的值 反向赋值给视图依赖的数据

    总结双向绑定指的就是数据和视图之间的项目影响，分为两种情况
    一种数据驱动视图，他是它通过object.defindProperty劫持数据让数据变成响应式的 在数据变化的时候ste函数内使用最新的数据重新渲染数据
    另一种是视图驱动数据，通过监听事件，在回调中通过e.target拿到用户输入的值反向赋值给依赖的数据

    我自己也写过一个基础的双向绑定 通过input模拟的
    通过object.defindeProperty set和get两个方法来实现
    当数据发生变化的时候他会自动执行set方法 在方法内将数据赋值到input的value中 这样就达到了数据驱动视图
    视图变化的时候我使用input事件监听，在回调中通过e.target获取到输入的值赋值给数据 然后在set中通过一个中间变量获取到这个新值 这样get方法内return它 这样就能同步获取到视图的数据

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Document</title>
    8.   </head>
    9.   <body>
    10.     <!-- 输入框 视图 V -->
    11.     <input type="text">
    12.   </body>
    13.   <script>
    14.     // 数据 M
    15.     let data = {name:'老韩'}
    16.     // 中间变量
    17.     let _name 
    18.     // 第一个参数操作的数据 第二个是操作的属性
    19.     // 第三个是配置项{get(),set()} 
    20.     Object.defineProperty(data,'name',{
    21.       // 获取属性的时候自动执行
    22.       // get的返回值决定了操作属性的值 如果没有return只会获取到一个undefined
    23.       get() {
    24.         console.log('name被获取了');
    25.         // 这里的返回值是视图中的最新数据
    26.         return _name
    27.       },
    28.       // 修改属性的时候自动执行 参数是修改后的值
    29.       set(newValue) {
    30.         console.log('name被修改了');
    31.         // 视图中修改数据的时候这里就赋值给中间变量 他的返回值就会是最新的视图数据
    32.         _name = newValue
    33.         // 数据一修改 就对视图重新赋值
    34.         document.querySelector('input').value = newValue
    35.       }
    36.     })
    38.     // 事件监听
    39.     document.querySelector('input').addEventListener('input',(e) => {
    40.       // input事件 用户输入的时候执行这个回调
    41.       console.log(e.target.value);
    42.       // 修改name为视图的最新数据 自动执行set方法 借助中间变量 联动get返回最新的视图数据
    43.       data.name = e.target.value
    44.     })
    45.   </script>
    46. </html>