浅谈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之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
js中split()方法得到的数组长度问题
Jul 19 Javascript
JS pushlet XMLAdapter适配器用法案例解析
Oct 16 Javascript
react 项目中引入图片的几种方式
Jun 02 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 程序授权验证开发思路
2009/07/09 PHP
PHP 一个比较完善的简单文件上传
2010/03/25 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
CodeIgniter针对数据库的连接、配置及使用方法
2016/03/03 PHP
CI框架常用方法小结
2016/05/17 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
YUI 读码日记之 YAHOO.util.Dom - Part.1
2008/03/22 Javascript
JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
2010/11/09 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
使用jquery中height()方法获取各种高度大全
2014/04/02 Javascript
Jquery操作js数组及对象示例代码
2014/05/11 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
浅析JavaScript作用域链、执行上下文与闭包
2016/02/01 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
用原生js做单页应用
2017/01/17 Javascript
利用require.js与angular搭建spa应用的方法实例
2017/07/19 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
javascript实现点亮灯泡特效示例
2019/10/15 Javascript
[00:36]DOTA2上海特级锦标赛 LGD战队宣传片
2016/03/04 DOTA
Python生成随机密码的方法
2017/06/16 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
Python使用try except处理程序异常的三种常用方法分析
2018/09/05 Python
如何理解python对象
2020/06/21 Python
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
Monica Vinader官网:英国轻奢珠宝品牌
2020/02/05 全球购物
中秋节主持词
2014/04/02 职场文书
2014年维稳工作总结
2014/11/18 职场文书
学习保证书100字
2015/02/26 职场文书
家装电话营销开场白
2015/05/29 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
Redis中一个String类型引发的惨案
2021/07/25 Redis
SQL Server中搜索特定的对象
2022/05/25 SQL Server