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. node-xlsx

    1.安装 必要组件 npm install node-xlsx -S /*Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator.Generator ...

  2. 华为软件开发云CloudIDE功能简测

    华为软件开发云CloudIDE是面向软件开发者的云端开发环境,支持在线编写代码,智能提示,代码提交,代码片段智能搜索等功能. CloudIDE实现了大部分IDE的功能,同时克服了全能IDE的缺点. 一 ...

  3. theOS环境搭建

    http://joeyio.com/ios/2014/01/01/make-a-mobile-substrate-tweak-using-theos/~/Doucment>: cd mytwea ...

  4. ASP.NET WebApi 使用Swagger生成接口文档

    前言 公司一直采用Word文档方式与客户端进行交流.随着时间的推移,接口变的越来越多,文档变得也很繁重.而且一份文档经常由多个开发人员维护,很难保证文档的完整性.而且有时写完代码也忘了去更新文档,为了 ...

  5. Windows下WebStorm使用SVN（转）

    安装了WebStorm之后,想配置svn,结果在file->settings->Version Contorl->subversion->with conmand line c ...

  6. 迷宫 洛谷 p1605

    题目背景 迷宫 [问题描述] 给定一个N*M方格的迷宫,迷宫里有T处障碍,障碍处不可通过.给定起点坐标和 终点坐标,问: 每个方格最多经过1次,有多少种从起点坐标到终点坐标的方案.在迷宫 中移动有上下 ...

  7. Xmemcached学习笔记

    memcached有三种java客户端 第一种:Com.danga 包下面的memcached,需引入jar(本人用的是memcached-2.5.2.jar 文末附上附件需要的可以下载) 第二种:s ...

  8. JFFS2文件系统的移植

    Linux文件系统的移植-JFFS2 JFFS2是JFFS的后继者,由Red Hat重新改写而成.JFFS2的全名为JournallingFlash File System Version 2(闪存日 ...

  9. Python 第七天

    OOP 面向对象编程--Object Oriented Programming,简称OOP,是一种程序设计思想.在Python中,所有数据类型都可以视为对象,当然也可以自定义对象.自定义的对象数据类型 ...

  10. HTML-JS基础 变量与输入输出 运算符 分支结构

    js中的变量 1.JS中变量声明的写法: var num=10;//使用var声明的变量属于局部变量只在当前作用域内有效 num=10;//不用var声明的变量,默认为全局变量,在整个JS文件中都有效 ...