vue原理之双向绑定虚

vue 双向绑定的原理:数据劫持结合发布者-订阅者模式

举例说明:

在vue中创建数据对象

    var vm = new Vue({
        data: {
            obj: {
                test: 1
            }
        },
        created: function () {
            console.log(this.obj);
        }
    });

结果:

  Object {

    test: 1

    _ob_: Observer

    get test: function reactiveGetter()

    set test: function reactiveSetter(newVal)

    _proto_: Object

  }

我们会发现其中多了些东西比如说get和set,那么他们是what?

vue通过object.defineProperty这个函数来进行数据劫持,这个函数可以控制一个对象的一些属性,读写啊之类的       

例如

   let Obj = {};

      let pro = '';

    Object.defineProperty(Obj, 'pro', {

          set(value) {

              pro = value

    console.log('变量值设定为‘ + value)

          },

          get(value) {

              return ’获取到的变量值为:‘ +  pro

          }

      })

     Obj.pro = 'vue';  // 变量值设定为vue
     console.log(Obj.pro);  //获取到的变量值为vue

     在设置Obj.pro的值时会触发set函数,在读取Obj.pro的值时会触发get函数

双向绑定:视图变化时更新数据,可以使用事件监听,比如input事件啊,click事件啊等

                  数据变化时更新视图,使用Object.defineProperty中定义的set函数,数据变化时执行set函数,在数据双向绑定时先对数据进行劫持监听,所以有一个Observe监听器,监听           数据的所有属性,属性变化时告诉订阅者Watcher看是否需要更新,因为订阅者是多个,所以需要消息订阅器Dep来收集订阅者,然后在监听器Observer和订阅者Watcher之间进           行统一管理,接着,我们还需要有一个指令解析器Compile,对每个节点元素进行扫描和解析,将相关指令对应初始化成一个订阅者Watcher,并替换模板数据或者绑定相应的函           数,此时当订阅者Watcher接收到相应属性的变化,就会执行对应的更新函数,从而更新视图。因此接下去我们执行以下3个步骤,实现数据的双向绑定

          1.实现一个监听器Observer,用来劫持并监听所有属性,如果有变动的,就通知订阅者。

          2.实现一个订阅者Watcher,可以收到属性的变化通知并执行相应的函数,从而更新视图。

          3.实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化相应的订阅器

 

posted @   流~星~泪  阅读(177)  评论(0编辑  收藏  举报
编辑推荐:
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
阅读排行:
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· 赶AI大潮:在VSCode中使用DeepSeek及近百种模型的极简方法
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
点击右上角即可分享
微信分享提示