浅谈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写的select支持上下键、首字母筛选以及回车取值的功能
Sep 09 Javascript
js 鼠标拖动对象 可让任何div实现拖动效果
Nov 09 Javascript
javascript常用正则表达式汇总
Jul 31 Javascript
详解JavaScript正则表达式之RegExp对象
Dec 13 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
javascript循环链表之约瑟夫环的实现方法
Jan 16 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
详解Vue 方法与事件处理器
Jun 20 Javascript
使用jQuery实现动态添加小广告
Jul 11 jQuery
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
原生js实现日期选择插件
May 21 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 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
在Windows版的PHP中使用ADO
2006/10/09 PHP
PHP中的事务使用实例
2015/05/26 PHP
遍历指定目录,并存储目录内所有文件属性信息的php代码
2016/10/28 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
php微信公众号开发之快递查询
2018/10/20 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
解析Jquery取得iframe中元素的几种方法
2013/07/04 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
js实现同一页面多个不同运动效果的方法
2015/04/10 Javascript
Vue.js:使用Vue-Router 2实现路由功能介绍
2017/02/22 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
Angular使用过滤器uppercase/lowercase实现字母大小写转换功能示例
2018/03/27 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
[50:01]Ti4 冒泡赛第二天 NEWBEE vs Titan
2014/07/15 DOTA
python用于url解码和中文解析的小脚本(python url decoder)
2013/08/11 Python
Python线程中对join方法的运用的教程
2015/04/09 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
python创建与遍历List二维列表的方法
2019/08/16 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
Python 生成一个从0到n个数字的列表4种方法小结
2019/11/28 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
Python使用Matlab命令过程解析
2020/06/04 Python
在python中使用pyspark读写Hive数据操作
2020/06/06 Python
python制作抽奖程序代码详解
2021/01/15 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
PHP如何防止SQL注入
2014/05/03 面试题
公司营业员的工作总结自我评价
2013/10/05 职场文书
索桥的故事教学反思
2014/02/06 职场文书
酒店员工检讨书
2014/02/18 职场文书
软件项目实施计划书
2014/05/02 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
JavaScript组合继承详解
2021/11/07 Javascript
怎么禁用Windows 11快照布局? win11不使用快照布局的技巧
2021/11/21 数码科技
vue实现列表垂直无缝滚动
2022/04/08 Vue.js