浅谈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 相关文章推荐
深入理解JavaScript系列(33):设计模式之策略模式详解
Mar 03 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
JavaScript浮点数及运算精度调整详解
Oct 21 Javascript
基于Bootstrap和jQuery构建前端分页工具实例代码
Nov 23 Javascript
JS设置时间无效问题的解决办法
Feb 18 Javascript
VueJs监听window.resize方法示例
Jan 17 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
微信小程序点餐系统开发常见问题汇总
Aug 06 Javascript
原生js实现照片墙效果
Oct 13 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
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
php上传图片类及用法示例
2016/05/11 PHP
Yii框架用户登录session丢失问题解决方法
2017/01/07 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
js不能获取隐藏的div的宽度只能先显示后获取
2014/09/04 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
使用 stylelint检查CSS_StyleLint
2016/04/28 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
JavaScript实现滚动加载更多
2020/12/27 Javascript
Python的Django框架中if标签的相关使用
2015/07/15 Python
Python爬虫文件下载图文教程
2018/12/23 Python
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
法律专业个人实习自我鉴定
2013/09/23 职场文书
简短证婚人证婚词
2014/01/09 职场文书
优秀导游先进事迹材料
2014/01/25 职场文书
旷课检讨书3000字
2014/02/04 职场文书
中学生自我评价范文
2014/02/08 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
四风批评与自我批评发言稿
2014/10/14 职场文书
信用卡收入证明范本
2015/06/12 职场文书
幼儿园音乐教学反思
2016/02/18 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL