热门标签 | 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了,最后我们一起看看如何简单的实现数据双向绑定吧!



  
  

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


推荐阅读
  • 本文初步探讨了PHP中基于JWT(JSON Web Token)的身份验证机制。具体流程包括:1. 客户端通过用户名和密码发起登录请求;2. 服务器接收并验证用户凭证的合法性,若验证通过,则生成并返回一个JWT令牌;3. 客户端接收该令牌,并在后续请求中携带此令牌以完成身份验证。这一机制不仅提高了安全性,还简化了会话管理。 ... [详细]
  • 基于STM32的智能太阳能路灯设计与华为云IOT集成方案
    基于STM32的智能太阳能路灯设计与华为云IOT集成方案 ... [详细]
  • JsonObject转换出错的常见问题及解决方案分析
    在使用JsonObject进行数据转换时,常见的问题之一是初始化失败。经过深入分析,发现导致这一问题的主要原因是输入的字符串格式不正确,特别是字符串中的每个值都必须用双引号包围。若缺少双引号,则会导致转换失败。为避免此类问题,建议在转换前对输入字符串进行严格校验,确保其符合JSON规范。此外,还可以利用第三方库如Gson或Jackson来提高转换的鲁棒性和效率。 ... [详细]
  • 本文将深入探讨MySQL与MongoDB在游戏账户服务中的应用特点及优劣。通过对比这两种数据库的性能、扩展性和数据一致性,结合实际案例,帮助开发者更好地选择适合游戏账户服务的数据库方案。同时,文章还将介绍如何利用Erlang语言进行高效的游戏服务器开发,提升系统的稳定性和并发处理能力。 ... [详细]
  • 深入浅出解析HTTP协议的核心功能与应用
    前言——协议是指预先设定的通信规则,确保双方能够按照既定标准进行有效沟通,从而实现准确的信息交换。例如,驯兽师通过拍手使动物坐下,这实际上是一种预设的协议。本文将详细探讨HTTP协议的核心功能及其广泛应用,解析其在现代网络通信中的重要作用。 ... [详细]
  • 在现代农业技术领域,智能倒奶技术正逐步应用于奶制品生产中。本文以农夫约翰为例,探讨了如何利用容量分别为A、B、C(均为1至15升的整数)的三个奶桶进行精确倒奶。初始状态下,A桶和B桶为空,而C桶则装满了牛奶。通过智能算法,该技术能够实现高效且精准的牛奶转移,不仅提高了生产效率,还减少了资源浪费。 ... [详细]
  • 本文探讨了Huffman树在数据结构中的应用及其原理。Huffman树,即哈夫曼树,是一种高效的数据压缩技术,通过构建最优二叉树实现编码,广泛应用于文件压缩和网络传输中,有效减少数据存储和传输的空间需求。 ... [详细]
  • 本章深入探讨了Java中的多态特性,这是面向对象编程的核心概念之一。多态指的是同一操作作用于不同的对象时,可以有不同的解释和执行方式。在Java中,多态通过父类引用变量引用子类对象来实现,即 `父类类型 引用变量名 = new 子类类型();`。这种方式允许程序在运行时根据实际对象的类型动态地选择合适的方法执行,从而提高代码的灵活性和可扩展性。此外,本章还详细介绍了多态的应用场景和注意事项,帮助读者更好地理解和运用这一重要概念。 ... [详细]
  • 在构建网络模型时,假设每个节点最多与 \( d \) 个其他节点相连,并且信息从任一节点传输到另一节点的最短路径长度(以单位路径计)不超过 \( k \)。本文旨在探讨在网络中最多可以容纳的节点数量,通过分析无向图的直径、最大度与顶点数量之间的关系,为网络设计提供理论依据。 ... [详细]
  • Cookie是一种小型数据文件,由Web服务器生成并存储在用户的浏览器中。当用户再次访问同一服务器时,这些数据可以被重新读取,为用户提供个性化的体验。Cookie在软件测试中具有重要作用,能够帮助测试人员验证会话管理、用户偏好设置等功能的正确性和安全性。通过深入解析Cookie的工作原理及其在不同场景下的应用,本文旨在为软件测试人员提供全面的技术指导。 ... [详细]
  • 在MySQL 5.1.22之前的版本中,InnoDB通过表级锁来确保自增字段的一致性。具体来说,InnoDB内部使用一个计数器来维护自增值,每次插入新记录时都需要获取表锁以保证数据的一致性和完整性。这种机制虽然简单,但在高并发环境下会显著影响性能。 ... [详细]
  • 本文详细解析了 `DirectoryInfo.GetFiles` 方法的使用方法及其应用场景。通过示例代码展示了如何在 C# 程序中利用该方法获取指定目录下的所有文件列表,同时探讨了其参数选项和返回值类型,为开发者提供了实用的操作指南。 ... [详细]
  • 下面的代码旨在输出其类文件的完整名称。对于不熟悉类字面量的读者,`Me.class.getName()` 方法会返回类的全称,例如 “com.javapuzzlers.Me”。通过这一机制,可以深入了解 Java 类加载和反射机制的内部工作原理。 ... [详细]
  • 在Eclipse环境中部署Spring框架源码的过程中,本文详细探讨了Junit加载ApplicationContext的具体实现方法。通过使用`ClassPathXmlApplicationContext`类,可以有效地初始化Spring容器,从而便于单元测试的执行。此外,文章还深入分析了Spring框架的核心机制,包括依赖注入和AOP等方面的原理,为开发者提供了宝贵的实战经验和技术指导。 ... [详细]
  • 问题背景:在使用Struts2注解实现ZIP文件下载功能时,由于InputStream未正确关闭,导致Tomcat服务器异常终止。重启后,系统抛出`java.io.EOFException`错误。具体表现为,在文件下载过程中,如果请求未正常完成或客户端提前中断连接,未关闭的InputStream会占用资源,最终导致服务器资源耗尽,触发异常。为解决此问题,建议在代码中确保InputStream在使用完毕后能够及时且正确地关闭,以避免资源泄露和服务器崩溃。 ... [详细]
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社区 版权所有