响应式和双向数据绑定理解

响应式

• 数据变化之后然后执行一定的副作用(页面渲染 发送ajax请求 任何的业务逻辑)

双向绑定

• 数据 和 视图互相影响的一个关系
  M -> V
  V -> M

<!-- 响应式 -->
<div id="app">
  <input type="text" />
</div>

<script>
  // Object.defineProperty  拦截对于对象属性的访问
  let data = {}
  let _name = ''
  Object.defineProperty(data, "name", {
    // 访问data中name属性就会立刻执行
    get() {
      console.log("name属性被访问了")
      // 如果我们定义了get函数  那么访问data.name 拿到的永远是get函数的返回值
      return _name
    },
    // 设置重新赋值时候会立刻执行
    set(newValue) {
      console.log("name属性被设置了")
      // 只要数据被更新就会执行此方法 更新视图 发送ajax
      // 只要name属性的值发生变化 就把name属性的值更新到视图中   dom
      // document.getElementById('app').innerText = newValue
      // 只要name变化 input框中就显示当前的name的值
      document.querySelector("#app input").value = newValue
    }
  })
  // 视图变化之后影响数据
  // 如何得知视图变化了？ 监听事件
  // 反向修改？ 在回调函数中拿到当前输入框中最新的值 然后反向赋值给name属性
  document.querySelector("#app input").addEventListener("input", (e) => {
    // e.target.value
    _name = e.target.value
  })

</script>