浅谈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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
ppk谈JavaScript style属性
Oct 10 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
jQuery仿天猫实现超炫的加入购物车
May 04 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
基于JavaScript实现图片点击弹出窗口而不是保存
Feb 06 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
vue mint-ui学习笔记之picker的使用
Oct 11 Javascript
JS返回顶部实例代码
Aug 09 Javascript
vue实现自定义多选按钮
Jul 16 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
Erlang的运算符(比较运算符,数值运算符,移位运算符,逻辑运算符)
2012/07/23 PHP
PHP5.2下preg_replace函数的问题
2015/05/08 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
PHP生成随机数的方法总结
2018/03/01 PHP
php+js实现裁剪任意形状图片
2018/10/31 PHP
有关PHP 中 config.m4 的探索
2020/08/26 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
jQuery 表单验证扩展(三)
2010/10/20 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
使用JSON.parse将json字符串转换成json对象的时候会出错
2014/09/04 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
Node.js用readline模块实现输入输出
2016/12/16 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
js模拟F11页面全屏显示
2019/09/17 Javascript
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
Django REST framework 单元测试实例解析
2019/11/07 Python
Python 使用type来定义类的实现
2019/11/19 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
德国旅游网站:weg.de
2018/06/03 全球购物
学生打架检讨书
2014/02/14 职场文书
模具专业毕业生自荐书范文
2014/02/19 职场文书
经典广告词大全
2014/03/14 职场文书
青年标兵事迹材料
2014/08/16 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
心得体会该怎么写呢?
2019/06/27 职场文书
使用JS实现简易计算器
2021/06/14 Javascript