62-[重点]Vue2的双向数据绑定原理——实现v-model双向数据绑定功能

最新推荐文章于 2024-07-19 11:07:53 发布

longfei815

最新推荐文章于 2024-07-19 11:07:53 发布

阅读量301

点赞数

分类专栏：前端基础知识文章标签：前端 javascript html vue.js

本文链接：https://blog.csdn.net/jolinoy/article/details/125643344

版权

前端基础知识专栏收录该内容

75 篇文章 2 订阅

订阅专栏

62-[重点]Vue2的双向数据绑定原理

// Vue2双向数据绑定原理: 借助Object.defineProperty()对数据进行劫持，并结合发布 - 订阅者模式，来实现双向数据绑定

// 准备一个对象,模拟data这个对象,往里面添加一个属性txtVal

代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>62-[重点]Vue2的双向数据绑定原理</title>
  <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
</head>
<body>
  <!-- <div id='app'>
      <input type="text" v-model="txtVal">
      <p>{{txtVal}}</p>
  </div>  
  <script>
    new Vue({
      el:'#app',
      data:{
        txtVal:"初始值"
      }
    })
  </script> -->

  <input type="text" id="oipt">
  <p id="op"></p>

  <script>

    // Vue2双向数据绑定原理: 借助Object.defineProperty()对数据进行劫持，并结合发布 - 订阅者模式，来实现双向数据绑定
    
    // 准备一个对象,模拟data这个对象,往里面添加一个属性txtVal
    let obj = {};
    let val = "初始值"
    Object.defineProperty(obj, "txtVal",{
      get(){
        return val
      },
      set(newVal){
        // 由第三方通知到每一位订阅者
        // 数据劫持
        // 修改界面
        op.innerHTML = newVal
        oipt.value = newVal
        val = newVal
      }
    });

    // 两个订阅者 ,订阅了obj.txtVal这个数据
    op.innerHTML = obj.txtVal;
    oipt.value = obj.txtVal;

    // v-model可以用value属性和input事件来代替
    
    oipt.addEventListener("input",e=>{
        // 在一边输入的时候一遍修改txtVal这个值
        // obj.txtVal = 用户输入的值
        // 发布了新的数据
        obj.txtVal = e.target.value  // 触发set方法
    })

</script>
</body>
</html>