热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

浅谈vue中数据双向绑定的实现原理

vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下。 首先大致学习了解下Object

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);

介绍完defineProperty了,最后我们一起看看如何简单的实现数据双向绑定吧!



  
  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 如何清空Layui树结构
    本文将详细介绍如何使用Layui框架清空树形结构,包括创建树、添加节点以及实现清空功能的具体步骤。通过本文,您将能够掌握Layui树的管理技巧。 ... [详细]
  • 本文详细介绍了如何在JavaScript中使用jQuery库进行AJAX异步请求,包括请求的基本配置和处理流程。同时,探讨了阿里巴巴的FastJSON库在JSON数据解析中的应用,并简要介绍了Highcharts图表插件的使用方法。 ... [详细]
  • 实践指南:利用Jenkins与JMeter实现自动化测试报告通知
    本文详细介绍了如何结合Jenkins和JMeter工具,通过自定义脚本向用户发送测试报告的通知。这不仅提高了开发团队的工作效率,也确保了信息的及时传递。 ... [详细]
  • django项目中使用手机号登录
    本文使用聚合数据的短信接口,需要先获取到申请接口的appkey和模板id项目目录下创建ubtils文件夹,定义返回随机验证码和调取短信接口的函数function.py文件se ... [详细]
  • 使用Gulp进行前端资源压缩
    本文探讨了如何利用Gulp这一强大的自动化构建工具,通过集成各种第三方插件来实现JavaScript、CSS和HTML等前端资源的高效压缩,以提升网站性能。 ... [详细]
  • 程序运行时变量的生命周期与存储管理
    本文介绍了程序运行时环境中各种变量的生命周期及其存储空间管理。通过分析典型程序空间布局,探讨了数据区、代码区、堆区和栈区的功能与特性。此外,文章详细解析了局部变量与全局变量的区别,以及它们如何影响程序的性能和资源利用。 ... [详细]
  • 题目链接:http://poj.org/problem?id=1442。题目要求:每次执行插入一个数值或获取一个数值的操作,获取的数值为当前第K大的数,K值在每次获取后递增。 ... [详细]
  • 深入解析TCP的三次握手、四次挥手及路由器的三层转发机制
    本文详细探讨了OSI七层模型中的传输层,重点分析了TCP协议的连接建立(三次握手)和断开(四次挥手)过程,以及路由器如何在三层网络中实现数据包的高效转发。 ... [详细]
  • 深入解析C语言中的sizeof操作符陷阱
    本文通过一个具体的例子探讨了C语言中sizeof操作符的使用陷阱,并详细分析了导致程序行为异常的原因。 ... [详细]
  • 告别酷暑,Python带你探寻全国最热城市
    随着九月的到来,炎热的夏季似乎终于画上了句号。对于许多人来说,夏天不仅仅是高温的代名词,更是对户外活动的一种限制。本文将通过Python编程技术,带领读者探索并找出今年夏季全国最热的城市。 ... [详细]
  • 深入理解CSS中position:relative与position:absolute的使用技巧
    在模仿设计一个在线商城页面时,我深入研究了CSS布局中的position属性,特别是relative和absolute两种定位方式的使用技巧和注意事项。本文总结了从CSDN博主onizukayao的文章中学到的关键点,并结合实际案例进行了详细解释。 ... [详细]
  • HTML中input标签使用disabled属性的影响及解决方案
    本文探讨了在HTML表单中为input标签设置disabled属性的具体效果,包括其对用户交互和数据提交的影响,并提供了一种既能保持输入框不可编辑又能确保数据提交的方法。 ... [详细]
  • CSV 文件的存取
    CSV文件介绍CSV(Comma-SeparatedValues),中文通常叫做逗号分割值。CSV文件由任意数目的记录(行& ... [详细]
  • 本文记录文件上传学习过程,教程为《UploadAttackFrameworkV1.0》文件上传检测客户端javascript检测(通常为检测文件扩展名)服务端MIM ... [详细]
  • 深入解析指针数组与数组指针,函数指针与指针函数
    本文详细探讨了指针数组和数组指针的区别,以及函数指针和指针函数的概念。通过具体的例子,解释了这些概念在C语言编程中的应用。 ... [详细]
author-avatar
我是小崔来啦
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有