首页 > 其他分享 >Vue2.0 双向绑定的原理与缺陷?

Vue2.0 双向绑定的原理与缺陷?

时间:2023-01-25 19:47:16浏览次数:48  
标签:触发 绑定 Object 双向 defineProperty 数据 监听 Vue2.0 setter

原理
Object.defineProperty、getter、setter 标准回答 Vue响应式指的是:组件的data发生变化,立刻触发试图的更新
原理:Vue采用数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过对data里面的对象属性进行遍历劫持数据的getter和setter,
当数据发生改变时,会触发对应的setter方法 通过dep.notice()去通知订阅者watcher,watcher接受到消息之后在去触发patch比较新老dom,
在去触发页面的更新

缺点
Object.defineProperty的缺点

一次性递归到底开销很大,如果数据很大,大量的递归导致调用栈溢出
不能监听对象的新增属性和删除属性
无法正确的监听数组的方法,当监听的下标对应的数据发生改变时
解决方法
运用this.$forceUpdate()强制刷新。

使用vm.$set(vm.items, indexOfItem, newValue)

将原数据 obj 进行深拷贝一下,然后再对拷贝后的数据 obj1 进行操作,然后再把操作后的数据obj1 赋值给原数据 obj

第一种情况,可以使用数组的splice方法,arr.splice(index, 1, item)

Object.defineProperty的不足
Object.defineProperty(obj, key, {enumberable:true,configurable:true,get {},set(value) {}});

vue是通过对Data中的属性进行遍历,数据劫持,通过getter(监听数据读取)和setter(监听数据修改),getter在读取数据的时候收集watcher作为依赖,setter在数据发生变化时通知watcher触发视图更新。
更新数组内容时是不会触发界面更新的。只有一些改变数组的方法push(),pop(),shift(),unshift(),splice(),sort(),reverse() 才会触发。对象里面的数组除外。

vue3.0的Proxy
替代了原有的 Object.defineProperty
Proxy和Object.defineProperty的区别是:后者定义的是一个对象上某个值得表现,前者是一个对象行为得表现,不局限某个属性,能观察到对象中属性的增加和删除,可以弥补后者的不足。

标签:触发,绑定,Object,双向,defineProperty,数据,监听,Vue2.0,setter
From: https://www.cnblogs.com/jycom/p/17067187.html

相关文章

  • Vue3.0 实现数据双向绑定的方法
    ue3.0是通过Proxy实现的数据双向绑定,Proxy是ES6中新增的一个特性,实现的过程是在目标对象之前设置了一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机......
  • 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"......