Vue的数据双向绑定,vue 3 和 vue2 数据劫持

Vue的数据双向绑定,vue 3 和 vue2 数据劫持

1.Vue的数据双向绑定

Vue的数据双向绑定,其实就是通过数据劫持+发布者订阅者模式来实现的。

  • Observer 通过Object.definePropty进行数据劫持
  • Dep 发布者,添加订阅者以及在数据发生改变的时候通知所有的订阅者
  • Watcher 订阅者,对数据进行观察以及保存数据修改需要触发的回调
  • Compiler 模板编译器,对HTML模板进行编译,提取其中的变量并转化为数据(绑定更新Watcher 订阅者)

在这里插入图片描述
双向绑定:

<!DOCTYPE html>
 <head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
 </head>
 <body>

    <!-- 实现vue -->
    <div id="app">
        <input type="text" v-model="text">
        {
   {
    text }}
    </div>

  <script type="text/javascript">

    function defineReactive(obj, key, val){
   
        var dep = new Dep();
        Object.defineProperty(obj, key, {
   
            get: function(){
   
                if(Dep.target){
   
                    dep.addSub(Dep.target);
                }
                return val
            },
            set: function(newVal){
   
                if(newVal === val)
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 2和Vue 3中,双向绑定的实现方式有一些区别。 Vue 2使用了基于Object.defineProperty的劫持方式来实现双向绑定。当你创建一个响应式对象时,Vue会通过Object.defineProperty方法劫持这个对象的属性,使得当属性发生变化时,能够自动通知相关的依赖进行更新。 具体来说,在Vue 2中,当你使用v-model指令将一个表单元素与一个数据属性进行双向绑定时,Vue会通过监听表单元素的输入事件和改变事件来自动更新数据。这样,当用户修改表单元素的内容时,数据会自动更新;反过来,当数据发生变化时,表单元素的内容也会自动更新。 然而,在Vue 2中,v-model指令只能用于表单元素,对于其他自定义组件则需要手动实现双向绑定逻辑。 相比之下,Vue 3中的双向绑定使用了基于Proxy的响应式系统来实现。当你创建一个响应式对象时,Vue会使用Proxy来拦截该对象的访问和修改操作,从而实现对属性的监听和更新。 在Vue 3中,v-model指令的实现方式也有所改变。Vue 3中的v-model指令会根据元素的类型自动选择合适的方式进行绑定。例如,对于表单元素,会使用类似Vue 2的Object.defineProperty方式实现双向绑定;而对于其他自定义组件,则可以通过自定义v-model指令来实现双向绑定逻辑。 总体而言,Vue 2和Vue 3在双向绑定的实现方式上有所不同。Vue 2使用基于Object.defineProperty的劫持方式,而Vue 3使用基于Proxy的响应式系统。此外,Vue 3中的v-model指令的实现方式也有所改变,更加灵活和可扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值