浅谈vue中数据双向绑定的实现原理


Posted in Javascript onSeptember 14, 2017

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);

浅谈vue中数据双向绑定的实现原理

介绍完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中数据双向绑定的实现原理

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 查找select ,并触发事件的实现代码
Mar 30 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
Aug 21 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jquery之基本选择器practice(实例讲解)
Sep 30 jQuery
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
Jun 04 Javascript
JavaScript动态绑定详解
Sep 14 #Javascript
React-Native使用Mobx实现购物车功能
Sep 14 #Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 #Javascript
SVG动画vivus.js库使用小结(实例代码)
Sep 14 #Javascript
浅谈AngularJS中使用$resource(已更新)
Sep 14 #Javascript
jQuery plugin animsition使用小结
Sep 14 #jQuery
angular.extend方法的具体使用
Sep 14 #Javascript
You might like
PHP Ajax中文乱码问题解决方法
2009/02/27 PHP
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
PHP常用函数和常见疑难问题解答
2014/03/05 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
php验证码生成代码
2015/11/11 PHP
php blowfish加密解密算法
2016/07/02 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
全面解析Node.js 8 重要功能和修复
2017/06/02 Javascript
layui富文本编辑器前端无法取值的解决方法
2019/09/18 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
Python实现的一个简单LRU cache
2014/09/26 Python
python之wxPython应用实例
2014/09/28 Python
python在文本开头插入一行的实例
2018/05/02 Python
python调用摄像头显示图像的实例
2018/08/03 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
解决Django部署设置Debug=False时xadmin后台管理系统样式丢失
2020/04/07 Python
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
植村秀美国官网:Shu Uemura美国
2019/03/19 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
法学函授自我鉴定
2014/02/06 职场文书
主要负责人任命书
2014/06/06 职场文书
推广普通话标语
2014/06/27 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
英文演讲稿开场白
2014/08/25 职场文书
学校食堂标语
2014/10/06 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
助学金感谢信
2015/01/20 职场文书
Python 循环读取数据内存不足的解决方案
2021/05/25 Python
python使用matplotlib绘制图片时x轴的刻度处理
2021/08/30 Python
mysql主从复制的实现步骤
2021/10/24 MySQL
nginx共享内存的机制详解
2022/03/21 Servers