浅谈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 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
封装html的select标签的js操作实例
Jul 02 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
JS实现列表页面隔行变色效果
Mar 25 Javascript
js CSS3实现卡牌旋转切换效果
Jul 04 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
Aug 06 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
杏林同学录(四)
2006/10/09 PHP
PHP显示今天、今月、上月、今年的起点/终点时间戳的代码
2011/05/25 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
js控制input框只读实现示例
2014/01/20 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
2016/04/05 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
Vue2.0权限树组件实现代码
2017/08/29 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
在vue-cli项目中使用bootstrap的方法示例
2018/04/21 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
Python lambda和Python def区别分析
2014/11/30 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
python3实现爬取淘宝美食代码分享
2018/09/23 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
如何基于Python按行合并两个txt
2020/11/03 Python
python 基于opencv操作摄像头
2020/12/24 Python
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
公司年会演讲稿范文
2014/01/11 职场文书
自考生自我评价分享
2014/01/18 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
2015年度合同管理工作总结
2015/05/22 职场文书
中学教师读书笔记
2015/07/01 职场文书