首页 > 其他分享 >Vue3.0 实现数据双向绑定的方法

Vue3.0 实现数据双向绑定的方法

时间:2023-01-25 19:45:07浏览次数:45  
标签:劫持 Object 对象 绑定 Vue3.0 Proxy 数组 双向 属性

ue3.0 是通过Proxy实现的数据双向绑定,Proxy是ES6中新增的一个特性,实现的过程是在目标对象之前设置了一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。

用法: ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。 var proxy = new Proxy(target, handler) target: 是用Proxy包装的被代理对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。 handler: 是一个对象,其声明了代理target 的一些操作,其属性是当执行一个操作时定义代理的行为的函数。 加分回答 Object.defineProperty 的问题:在Vue中,Object.defineProperty无法监控到数组下标的变化,导致直接通过数组的下标给数组设置值,不能实时响应。目前只针对以上方法做了hack处理,所以数组属性是检测不到的,有局限性Object.defineProperty只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。

Vue里,是通过递归以及遍历data对象来实现对数据的监控的,如果属性值也是对象那么需要深度遍历,显然如果能劫持一个完整的对象,不管是对操作性还是性能都会有一个很大的提升。 Proxy的两个优点:可以劫持整个对象,并返回一个新对象,有13种劫持

在Vue2.0的基础上将Object.definedproperty换成了功能更强大的proxy,原理相同。在vue实例初始化的时候(vm._init()执行的时候)调用Observe类的实例方法observe,传入数据(若是对象则发生递归),将其中每个数据进行一遍数据劫持(get实现依赖收集,set实现事件派发(这里的模式为发布订阅模式))。补充:相对vue2.0解决的问题:解决无法监听新增属性或删除属性的响应式问题、解决无法监听数组长度和index变化问题

标签:劫持,Object,对象,绑定,Vue3.0,Proxy,数组,双向,属性
From: https://www.cnblogs.com/jycom/p/17067197.html

相关文章

  • asp.net2.0数据绑定之Eval和Bind区别
    例如:  <EditItemTemplate>  <asp:Label ID="CityIDLabel1" runat="server" Text='<%# Eval("CityID") %>'></asp:Label>      <asp:TextBox......
  • python进程绑定CPU的意义
        ===================================== 相关:python进程绑定CPU的一些Demo【转载】python进程绑定CPU......
  • 路由器功能------BFD (Bidirectional Forwarding Detection)双向转发检测
    原理:1.状态迁移BFD会话建立遵循三次握手,BFD有四种状态:Down:会话处于Down或者刚刚创建Init:已经能够与对端系统通信,本端希望使会话进入Up状态Up:会话已经建立AdminDown:会......
  • python进程绑定CPU的一些Demo
    从https://www.cnblogs.com/devilmaycry812839668/p/17066212.html中知道如何对python进程设置CPU绑定,本文对此进行一些延伸,给出一些例子:代码1:importosfrommultiproce......
  • 【转载】 python进程绑定CPU
    版权声明:本文为CSDN博主「人间再无张居正」的原创文章,遵循CC4.0BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接:https://blog.csdn.net/u013887652/article/deta......
  • vuejs从入门到精通——Vue语法——插值绑定
    Vue语法——插值绑定插值绑定是Vue中最常见的、最基本的语法。绑定的内容主要有文本插值和HTML插值两种。一、文本插值文本插值用双大括号{{}}将要绑定的变量、值......
  • oracle ORA-01461: 仅能绑定要插入 LONG 列的 LONG 值
    解决:将数据库中的数据类型改为:CLOB(存字符串大文本)或者BLOB(存二进制文件)博主问题场景:批量插入图片数据,图片太大,每张图片超过了4000字节,就会报错。将VARCHAR2修改为cl......
  • 双向链表
    双向链表既可以向前,也可以向后,其节点是由两个指针域,一个指向上一个节点,一个指向下一个节点,和一个数据域构成的。第一个节点的指向前一个指针为None,最后一个节点指向下......
  • Powerbuilder练级攻略003_datawindow绑定接口返回数据
    开发一个接口,确保http://192.168.37.184:10103/demo3的Get请示返回{"code":0,"data":[{"stu_num":1,"stu_name":"张三"},{"stu_num":2,"stu_name":"李四"}],"msg"......
  • 给<a-table></a-table>的每一行绑定按钮
    在a-table标签体内写入<spanslot="tags"slot-scope="text,tags,index"><a-buttonsize="small"@click="edit(text,tags,index)">编辑</a-button>......