【Vue】双向数据绑定原理 vue2.0 与 vue3.0

最新推荐文章于 2024-07-05 17:33:47 发布
最新推荐文章于 2024-07-05 17:33:47 发布
阅读量783 收藏 4
点赞数
分类专栏： Web前端 Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51481135/article/details/126435788
版权
本文深入探讨Vue框架的双向数据绑定，从2.0版本的Object.defineProperty方法实现，到3.0版本利用ES6的Proxy特性进行改进。Vue3.0的Proxy提供了更高效的数据监听，能够监听数组内部变化，解决了2.0版本的某些局限性。同时，文章引发了关于为何Vue2.0不使用Proxy的思考，主要原因是兼容性问题。
摘要由CSDN通过智能技术生成

目录

一、什么是双向数据绑定？

二、双向数据绑定原理 vue2.0

三、Vue 3.0使用ES6的新特性porxy

四、思考

一、什么是双向数据绑定？

vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是vue的精髓之处了。

二、双向数据绑定原理 vue2.0

  • vue的人都知道 vue2.x实现双向数据绑定的原理是利用Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的，当数据发生改变发出通知。
  • 在MDN上对该方法的说明是：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
  • 它接收三个参数，要操作的对象，要定义或修改的对象属性名，属性描述符。重点就是最后的属性描述符。
  • 属性描述符是一个对象，主要有两种形式：数据描述符和存取描述符。
  • 这两种对象只能选择一种使用，不能混合两种描述符的属性同时使用。上面说的 get 和 set 就是属于存取描述符对象的属性。
  • 然后我们可以通过在存取描述符中的get和set方法内写入自定义的逻辑来实现对象获取属性和设置属性时的行为。
     
    • </
最低0.47元/天 解锁文章
早睡早起长头发
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue2和vue3双向绑定的原理
m0_62351590的博客
02-07 406
新的响应式机制采用了ES6的ProxyApi，抛弃了Object.defineProperty() Vue2双向数据绑定存在的问题： 关于对象 Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对property执行 getter/setter转化，所以property必须在 data对象上存在才能让 Vue 将它转换为响应式的 关于数组 Vue 不能检测以下数组的变动： 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newV.
Vue 3.0双向绑定原理的实现方法
10-16
Vue3.0相较于Vue2.0在双向绑定的数据劫持方式上做了改进，使用了Proxy代理代替了Object.defineProperty来实现数据响应式系统。这使得Vue3.0在处理数据响应式时更加高效、方便，同时也带来了更简洁的代码实现方式。 ...
双向数据绑定原理 vue2.0 与 vue3.0
lzfengquan的博客
07-20 402
目前3.0已经发布了，自己也尝试在2的基础上升级3版本项目，发现3确实变了好多，例如钩子函数就大量减少了。 那么原理也是有变化的 用过vue的人都知道 vue2.x实现双向数据绑定的原理是 利用 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的，当数据发生改变发出通知。 在MDN上对该方法的说明是：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
Vue2和Vue3区别的理解和学习2-数据绑定原理
最新发布
baosy1999的博客
07-05 1127
Vue2和Vue3区别的理解和学习2-数据绑定原理
vue双向数据绑定的原理（vue2和vue3）
thebeats的博客
04-02 579
在vue2.x版本中用object.defineProperty来实现双向数据绑定原理，而在vue3.0版本中用Proxy这个对象来代替object.defineProperty实现数据的双向绑定。1.不需要进行显示调用，vue的双向绑定原理就是通过数据劫持+发布订阅来实现的，比如angular的脏检查需要通过显示调用markForCheck，react则需要通过setState来进行显示调用。当访问或者设置对象的属性的时候，触发相应的函数，并且返回设置属性的值。· 直接监听数组的变化。
vue2和vue3 的双向绑定原理
牛牪犇
11-06 1028
一般我们所指的双向绑定都是指的数据,即当数据发生变化的时候,视图也发生变化;当视图发生变化时,数据也同步跟着变化,这就是vue的精髓之一.对象有两种属性：1 . 数据属性：就是我们经常使用的属性2 . 访问器属性：也称存取属性（存取器属性就是一组获取和设置值的函数）控制台打印:数据属性就是a和b；get和set就是关键字，他们后面各自对应一个函数，这个函数就是上面红字部分所讲的，存储器属性。get对应的方法称为getter，负责获取值，它不带任何参数。
vue2和vue3双向数据绑定原理
qq_42589331的博客
03-02 316
Proxy可以理解成，在目标对象之前架设一层 "拦截"，当外界对该对象访问的时候，都必须经过这层拦截，而Proxy就充当了这种机制，类似于代理的含义，它可以对外界访问对象之前进行过滤和改写该对象。基本语法const obj = new Proxy(target, handler)，被代理之后返回的对象 = new Proxy(被代理对象，要代理对象的操作)Object.definedProperty方法可以在一个对象上直接定义一个新的属性、或修改一个对象已经存在的属性，最终返回这个对象。
详解Vue双向数据绑定原理解析
08-29
Vue 双向数据绑定原理解析 Vue 双向数据绑定是 Vue 框架中的一种核心机制，实现数据和视图之间的双向绑定。下面是对 Vue 双向数据绑定原理的详细解析。 基本原理 Vue 采用数据劫持结合发布者-订阅者模式的方式，...
vue双向数据绑定原理探究(附demo)
08-31
本文将深入探讨 Vue 双向数据绑定的原理，以及通过一个小 demo 来演示其实现方式。 首先，我们要理解双向数据绑定的基本思想。这种思想的核心是数据层（数据模型）与 UI 层（视图）的实时同步。当数据发生变化时，...
vue3.0中的双向数据绑定方法及优缺点
12-12
Vue.js 是一款流行的前端框架，其核心特性之一就是它的双向数据绑定。在 Vue 2.x 版本中，这一机制是通过 `Object.defineProperty` 来实现的，然而在 Vue 3.0 中，这一方法被 `Proxy` 替代，以提供更高效的数据绑定...
Vue数据双向绑定原理及简单实现方法
08-27
Vue 数据双向绑定原理及简单实现方法 数据双向绑定是 Vue 框架的核心特性之一，它通过数据劫持结合发布者-订阅者模式来实现的。下面将详细介绍 Vue 数据双向绑定原理及简单实现方法。 一、数据劫持 Vue 中的数据...
vue双向数据绑定原理（vue2和vue3的区别）
yangpengze的博客
01-30 685
vue.js是采用数据劫持结合发布者-订阅者模式的方式， 通过Object.defineProperty()来劫持各个属性的setter，getter， 在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。 具体步骤 第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上 setter和getter 这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化 第二步： compile(模板解析器)解析模板指令，将模板中的变量替换成数据
VUE2.0与VUE3.0的数据双向绑定
yinge0508的博客
10-25 353
1.VUE2.0通过Object.defineProperty来劫持对象属性的getter和setter操作，当数据发生变化时发出通知 2.VUE3.0通过Proxy来劫持数据，当数据发生变化时发出通知 这俩种数据双向绑定都是基于数据劫持来实现的。 数据劫持的优势： 　　①不需要进行显示调用，vue的双向绑定原理就是通过数据劫持+发布订阅来实现的，比如angular的脏检查需要通过显示调用markForCheck，react则需要通过setState来进行显示调用 　　②通过属性的劫持可以精准获得
Vue2和Vue3双向数据绑定底层原理
2301_77209411的博客
06-25 483
当组件中的任何一个属性发生变化时，Vue就会通过Object.defineProperty（）方法重新定义该属性的setter方法，从而在属性被重新赋值的时候触发对应的watcher更新对应的DOM节点。在组件创建时，Vue3会对组件的data中的每个属性进行代理，使用了Proxy中的handler中的set方法，当组件中的任何一个属性发生变化时，就会触发set方法，从而更新对应的DOM节点。在组件创建时，Vue会对组件的data中的每个属性进行代理。当用户输入改变对应输入节点中的值时，input节点上。
vue2.x和3.x的双向绑定原理
屈小康
04-11 2908
1、vue2.x采用的是object.defineProperty 1、vue2.x的双向数据绑定是通过数据劫持结合发布者订阅者模式的方式来实现的，通过object.defineProperty来劫持各个属性的setter，getter，在数据变化时发布消息给订阅者，触发相应的监听回调来渲染视图。也就是说数据和视图同步，数据发生变化，视图变化，视图变化，数据也随之发生变化。 2、Obejct.defineproperty（obj,prop,descriptor）方法，接收三个参数，分别是obj(定义其上属性
vue2和vue3的双向绑定原理
七怪
11-17 1310
vue2和vue3的双向绑定原理
Vue数据双向绑定原理（vue2向vue3的过渡）
热门推荐
主要领域：前端开发
11-13 3万+
众所周知，Vue的两大重要概念： 数据驱动 组件系统 接下来我们浅析数据双向绑定的原理 一、vue2 1、认识defineProperty vue2中的双向绑定是基于defineProperty的get操作与set操作，那么我们简单认识下defineProperty， 作用： 就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性。 那么我们先来看下Object.getOwnPrope...
vue 响应式原理,vue2.0 和vue3.0 双向绑定原理
ybilss的博客
05-25 251
数据响应式: 数据模型是JavaScript 的普通对象,当我们修改数据时,视图会进行更新,避免了操作DOM,提高了开发效率 双向绑定:数据改变,视图也会跟着变化;视图改变,随之数据也会改变 数据驱动:开发过程中需要关注数据本身,不需要关心数据是怎么渲染到视图的 直接看案例 vue2.0 双向绑定原理 <!-- body --> <div id="app">app</div> <script> let data={ msg
vue2与vue3的双向绑定原理
前端小口袋
05-07 1138
vue2与vue3的双向绑定写法不同 vue使用Object.defineProperty来劫持对象属性 而vue3使用Proxy代理来实现双向绑定。 vue2： <div class="data"></div> <label>vue2:</label> <input type="text" class="dataInput" /> var data={} Object.defineProperty(data,"value
Vue2与Vue3双向绑定实现原理解析
"本文将详细解释Vue2的双向绑定原理，包括如何通过`Object.defineProperty`实现数据监听，以及编译数据到页面的过程。还将提及Vue3中如何利用`Proxy`来改进这一机制。" Vue.js 的双向绑定是其核心特性之一，它使得...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值