vue中最常见的属v-model这个数据双向绑定了，很好奇它是如何实现的呢？尝试着用原生的JS去实现一下。

首先大致学习了解下Object.defineProperty()这个东东吧！

* Object.defineProperty()

        *   对对象的属性进行 定义/修改

        * */

        let obj = {x:10}

        // 这两种方式都相对来说比较简单，直接，但是有些时候我们需要对对象的属性的修改和增加进行必要的干预

//        obj.y = 20;

//        obj.x = 100;

//        obj.x = 'abc';

//

//        let arr = [1,2,3];

//        arr.length = 'abc';//不可更改

//        console.log(arr);

//        console.log(obj.x);

//        delete obj.x;

//        console.log(obj);

        Object.defineProperty(obj, 'y', {

            configurable: false,    //设置是否可删除  false为不可删除

            value: 100

        });

        console.log(obj);

        delete obj.y;//删除

        console.log(obj);

        //设置对象某个属性值的时候，顺便设置它的属性。enumerable 可枚举 configurable 可以删除否 writable 可改值否

        Object.defineProperty(obj, 'z', {//enumerable  可枚举(没有则新添加)

            enumerable: true,//为false时，for..in object.keys  json.stringfy 不能取到该z属性

            value: 10000

        });

        for (var attr in obj) {

            console.log(attr);

        }

        Object.defineProperty(obj, 'm', {

            writable: false,//可更改

            value: 9

        });

        console.log(obj);

        obj.m = 100;

        console.log(obj);

以上总结了对象的defineProperty四个属性：configurable，enumerable，value，writable

接下来再深入认识下它的另外两个方法：set 以及get

注意：get和set不能与configurable，enumerable，value，writable同时存在

let obj = {x:10}

        let y = 100;

        Object.defineProperty(obj, 'y', {

            get() {

                //当obj的y属性被调用的时候触发，该方法的返回值将作为获取的结果

                console.log('get');

                return y;

            },

            set(value) {

                //当obj的y属性被设置的时候触发

                console.log('set', value);

                y = value;

            }

        })

        console.log(obj.y);

        obj.y = 1;

        console.log(obj.y);

 介绍完defineProperty了，最后我们一起看看如何简单的实现数据双向绑定吧！

<body>

    <input type="text" id="age">

    <h1></h1>

    <script>

        var ageElement = document.querySelector('#age');

        var h1Element = document.querySelector('h1');

        let obj = {};

        Object.defineProperty(obj, 'age', {

            get() {

            },

            set(value) {

                ageElement.value = value;

                h1Element.innerHTML = value;

            }

        })

        obj.age = 10;

        ageElement.oninput = function() {

            obj.age = this.value;

        }

       

    </script>

vue中数据双向绑定的实现原理的更多相关文章

  1. vue中数据双向绑定注意点

    最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...

  2. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  3. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  4. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  5. 对象的属性类型 和 VUE的数据双向绑定原理

    如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty()  //IE9+  和标准浏览器  支持 查看属性的 ...

  6. 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()

    Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...

  7. vue中的双向绑定

    概述 今天对双向绑定感兴趣了,于是去查了下相关文章,发现有用脏检查的(angular.js),有用发布者-订阅者模式的(JQuery),也有用Object.defineProperty的(vue),其 ...

  8. vue实现数据双向绑定的原理

    一.知识准备Object.defineProperty( )方法可以直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,并返回这个对象.Object.defineProperty(obj,pr ...

  9. Vue的数据双向绑定原理——Object-defineProperty

    一.定义 ①方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ②vue.js的双向数据绑定就是通过Object.defineProperty方法实现的,俗称属性拦截 ...

随机推荐

  1. IIS下防止mdb数据库被下载的实现方法

    第一种方法:要求网站管理人员具体asp编程经验.因为现在的销售虚拟主机的系统,已经为用户建立了一个database目录,跟web目录同一个级别,用户访问的是web中的文件,而无法访问database目 ...

  2. Java动态代理学习【Spring AOP基础之一】

    Spring AOP使用的其中一个底层技术就是Java的动态代理技术.Java的动态代理技术主要围绕两个类进行的 java.lang.reflect.InvocationHandler java.la ...

  3. [Scoi2014]方伯伯的玉米田 二维树状数组+动态规划

    考试最后半个小时才做这道题.十分钟写了个暴力还写挂了..最后默默输出n.菜鸡一只. 这道题比较好看出来是动规.首先我们要明确一点.因为能拔高长度任意的一段区域,所以如果从i开始拔高,那么一直拔高到n比 ...

  4. 【性能测试工具】- Http_Load

    优点:参数少:缺点:url.txt文件要求较高,不如siege方便 http_load是ACME实验室开发的,这个工具以并发方式运行,用以测试web服务器的吞吐量与负载.它不同于其它压力测试工具的是, ...

  5. oracle 11gR2 RAC安装手册

    --oracle 11gR2 RAC安装手册 -----------------------------2013/10/29 参考三思笔记 http://files.cnblogs.com/jackh ...

  6. Vue自定义事件

    前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Even ...

  7. SQL连接操作

    一．Join语法概述 join 用于多表中字段之间的联系,语法如下: ... FROM table1 INNER|LEFT|RIGHT JOIN table2 ON conditiona table1 ...

  8. html5/css3布局（一）

    响应式布局 1.响应式布局介绍 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,就是一个网页可以在不同设备上显示,比如:电脑.平板.手机等,不同设备都可以兼容显示.这样就不必为每一种 ...

  9. DVWA笔记之一:brute Force

    1.Low 级别 burpsuite抓包 low级别是使用GET请求进行登录,将其发送到Intruder中,并增加password变量 之后选择字典开始攻击. 暴力破解完成后,查看结果RESULT,根 ...

  10. M4——GPIO配置

    1.GPIO 简述: 通用输入输出(General Purpose Input Output)的简称,就是芯片引脚可以通过他们输出高电平或者低电平,也可以通过他们读取引脚的电平状态. 以STM32F4 ...