375 数据双向绑定演示：一个 input + v-model，Object.defineProperty，数据双向绑定的原理简单实现

2020-03-14 13:51:39 阅读：222 来源： 互联网

标签：绑定 obj name temp Object newVal set 双向

5.1 一个 input + v-model

 v-model 指令 ： 数据双向绑定的指令
 作用 ： 把data中的msg值 和  input上的值 绑定到一起
 注意 ： v-model只能用在 表单控件上 (input checkbox 等)
 > 可以在浏览器分别演示 V => M  和 M =>V

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- V -->
        <!-- v-model  -->
        <!-- 
        作用 : 把`input的value值`  和 `data里的msg` 绑定到了一起, 只要一方发生变化,另外 一方会跟着改变 
       -->
        <input type="text" v-model="msg" />
    </div>
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                // M
                msg: '这是测试信息'
            }
        })
    </script>
</body>

</html>

5.2 Object.defineProperty

内在-响应式原理

let obj = {}
let temp

obj.name = 'zhanhgsan'

// 参数1 ： 要给哪个对象设置属性
// 参数2 ： 给对象设置什么属性
// 参数3 ： 属性的修饰符
Object.defineProperty(obj， 'name'， {
  set： function(newVal) {
    console.log('赋值了'， newVal)
  }，
  get： function() {
    console.log('取值了')
    return temp
  }
})

06-双向数据绑定原理01.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <script>
        /**
         *
         * 1. vue的数据双向绑定 是通过 `数据劫持` Object.defineProperty() 来实现的  ,
         *     Object.defineProperty()  是 es5 提出来的一个 无法 shim(兼容) 的特性 , 无法兼容ie8以下
         *
         * 2.  Object.defineProperty()  添加/修改属性
         *
         */

        let obj = {}
        let temp = ''

        // 参数1 : 把属性添加到哪个对象上去
        // 参数2 : 添加的属性 【注意，属性名要加引号，否则不会调用 set、get方法。】
        // 参数3 : 属性描述符 对象形式
        Object.defineProperty(obj, 'name', {
            // 赋值
            set(newVal) {
                console.log('调用了set : ', newVal)
                temp = newVal
            },
            // 获取
            get() {
                console.log('调用了get')
                return temp
            }
        })
    </script>
</body>

</html>

5.3 数据双向绑定的原理简单实现

通过数据劫持来实现的

<input type="text" id="txt" />
演示： V ==> M

//1. 拿到文本框
const txt = document.getElementById('txt')
//2. 时刻监听txt ，拿到最新的值
txt.oninput = function() {
  console.log(this.value)
  obj.name = this.value
}

//3. 数据模型
var obj = {}
let temp

Object.defineProperty(obj， 'name'， {
  // 给属性赋值的时候会掉
  set： function(newVal) {
    console.log('调用了set'， newVal)
    temp = newVal

    txt.value = newVal
  }，
  get： function() {
    console.log('调用了get')
    return temp
  }
})

V => M

//1. 获取 input的值，最新值
//2. 通过监听oninput 拿到最新值
//3. 把最新值赋值给 obj.name
//4. 就会掉了set方法，就会修改了数据

M => V

//1. obj.name = 'xxx'
//2. 调用 set方法
//3. 把值赋值给input元素

07-数据双向绑定的实现.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>

<body>
    <!-- V  -->
    <input type="text" id="txt" />

    <script>
        // M
        let obj = {}
        let temp = ''

        // V => M 【视图层到模型层的数据绑定】
        let ipt = document.querySelector('#txt')
        ipt.oninput = function() {
            // console.log(this.value)
            obj.name = this.value
        }

        // M  ==> V 【模型层到视图层的数据绑定】
        Object.defineProperty(obj, 'name', {
            set(newVal) {
                temp = newVal
                ipt.value = newVal
            },
            get() {
                return temp
            }
        })
    </script>
</body>

</html>

标签：绑定,obj,name,temp,Object,newVal,set,双向
来源： https://www.cnblogs.com/jianjie/p/12491834.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。