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. VM虚拟机的配置

    1.软件安装 点击如图所示文件安装虚拟机 点击下一步,再安装过程中输入密钥 1F04Z-6D111-7Z029-AV0Q4-3AEH8 设置相关内容完成安装 2.加载虚拟机 点击软件图标打开软件 软件 ...

  2. NYOJ 71 独木舟上的旅行（贪心）

    独木舟上的旅行 时间限制:3000 ms  |  内存限制:65535 KB 难度:2   描述 进行一次独木舟的旅行活动,独木舟可以在港口租到,并且之间没有区别.一条独木舟最多只能乘坐两个人,且乘客 ...

  3. Modelsim调用用do脚本自动化仿真

    前言 EDA发展的趋势是自动化,使用脚本自动化仿真可以减少不必要的时间浪费. 流程 在windows下新建批处理脚本bat文件(linux下可用shell脚本或者其他,注意给脚本运行权限即可:chmo ...

  4. MAC下安装MAMP的PHPredis扩展

    下载phpredis扩展安装包.git clone https://github.com/nicolasff/phpredis.git: 解压后,进入该目录: 依次执行以下操作完成安装: /Appli ...

  5. Spring集成RabbitMQ-使用RabbitMQ更方便

    如果提到Spring,你脑海中对他的印象还停留在SSH三大框架之一,那或许你该好好重新认识这个家伙. 在IT技术日新月异的今天,他还能让你忘不了并与他朝夕相处,他,肯定有自己的绝活.如今他早已经不是孤 ...

  6. css盒子边框样式

    边框样式有全边框和单个边框样式,可对每条边设置不同的样式 如下代码P1为全边框样式,P2为单个边框设置不同的样式: <!DOCTYPE html> <html lang=" ...

  7. iOS 开源一个高度可定制支持各种动画效果,支持单击双击,小红点，支持自定义不规则按钮的tabbar

    TYTabbarAnimationDemo 业务需求导致需要做一个tabbar,里面的按钮点击带有动画效果,tabbar中间的按钮凸出,凸出部分可以点击,支持badge 小红点等,为此封装了一个高度可 ...

  8. Java 异常框架

    一张图看懂Java 异常框架之间的关系. 说明: 受检异常:编译的时候报错. 费受检异常:运行时报错,需要知道几个常见的异常 NullPointerException(空指针异常) ArrayInde ...

  9. Request常用方法 （总结）

    一.HttpServletRequest介绍 HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,通过这个对象 ...

  10. ​'JAVAC' 不是内部或外部命令的解决方法

    ​'JAVAC' 不是内部或外部命令解决方法.. 在cmd里边输入javac就会提示”'JAVAC' 不是内部或外部命令,也不是可运行的程序 或批处理文件..此时原因分析: 一.确定是否安装了jdk ...