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. Git的一些知识

    Git Git的特点: Git存储的是文件快照, 即整个文件内容, 并保存指向快照的索引 分布式 原理 这个之前面试实习的时候被问到过, 搞懂基本原理还是很重要的 Git的目录结构在执行git ini ...

  2. node 内存管理相关

    为什么在node中要担心node内存管理 使用JavaScript进行前端开发时几乎完全不需要关心内存管理问题,对于前端编程来说,V8限制的内存几乎不会出现用完的情况,v8在node中有着内存的限制( ...

  3. Web如何应对流量劫持？

    虽然互联网经过多年的发展,可是网站使用的底层协议仍是 HTTP,HTTP 作为一种明文传播协议,所有的传输数据都是明文,我们都知道在通信中使用明文(不加密) 内容可能会被窃听,同时网站存在被劫持的风险 ...

  4. 菜鸟帮你跳过openstack配置过程中的坑

    一:前言 对于一个以前做java全栈工程师而言,而且没学过Linux,很少用虚拟机(还是在大学的时候简单的用过),去配置openstack我想我入的坑肯定比有基础的一定要多,躺在每个坑中徘徊思索的时间 ...

  5. mui开发app前言（一）

    dcloud mui开发app前言 大一那会就听说html5快要发布了,前景无量,厉害到能写操作系统==|||(什么???蛤?) 似乎html5标准还没正式发布那会,使用hybrid模式开发app已经 ...

  6. pwnable.kr memcpy之write up

    // compiled with : gcc -o memcpy memcpy.c -m32 -lm #include <stdio.h> #include <string.h> ...

  7. FFT 专题讲解

    FFT是什么? FFT是快速傅里叶变换(fast Fourier transform)的简称.在ACM领域主要是用来快速求解多项式乘法的算法, 在信号领域也有很大用途 基础知识 卷积 举个例子,给你两 ...

  8. Do not request Window.FEATURE_ACTION_BAR and set windowActionBar to false in your theme to use a Toolbar instead

    在某个activity中使用toolbar的使用,必须是在相应的application主题中也设置 <item name="windowNoTitle">true< ...

  9. 解析spring循环依赖策略

    循环依赖 所谓循环依赖就是多个Bean之间依赖关系形成一个闭环,例如A->B->C->...->A 这种情况,当然,最简单的循环依赖就是2个Bean之间互相依赖:A->B ...

  10. redux深入理解之中间件(middleware)

    理解reduce函数 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值. arr.reduce([callback, initi ...