zoukankan      html  css  js  c++  java
  • vue的双向绑定的原理是什么?

    vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过ES5提供的Object.defineProperty()方法来劫持(监视)各个属性的setter,getter,在数据变动的时发布消息给订阅者,触发相应的监听回调。并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的视图,而不是对所有的数据都执行一次检测。

     具体的步骤:
           1.需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上getter和setter这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化
           2.compile解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
           3.Watcher订阅者是Observer和compile之间通信桥梁,主要做的事情是:
           - 在自身实例化时往属性订阅器(dep)里面添加自己
           - 自身必须有一个update()的方法
           - 待属性变动dep.notice()通知的时候,能调用自身的update()方法,并触发compile中绑定的回调,则功成身退
           4.MVVM作为数据绑定的入口,整合observer、compile和watcher三者,通过observer来监听自己的model数据变化,通过compile来编译模板指令,最终利用watcher搭起的observer和compile之间的通信桥梁,达到数据变化---试图更新;视图交互变化(input)-->数据model变更的双向绑定效果

     版本比较: vue是基于依赖收集的双向绑定; 3.0版本之前使用Object.definePropetry,3.0新版使用Proxy

    • 1.基于数据劫持/依赖收集 的双向绑定的优点
      • 不需要显示的调用,Vue利用数据劫持+发布订阅,可以直接通知变化并且驱动视图
      • 直接得到精确的变化数据,劫持了属性setter,当属性值改变,我们可以精确的获取变化的内容newValue,不需要额外的diff操作
    • 2.Object.defineProperty的缺点
      • 不能监听数组:因为数组没有getter和setter,因为数组长度不确定,如果太长性能负担太大
      • 只能监听属性,而不是整个对象,需要遍历循环属性
      • 只能监听属性变化,不能监听属性的删减
    • 3.proxy的好处
      • 可以监听数组
      • 监听整个对象不是属性
      • 13种拦截方法,强大很多
      • 返回新对象而不是直接修改原对象,更符合immutable;
    • 4.proxy的缺点
      • 兼容性不好,而且无法用polyfill磨平;
  • 相关阅读:
    烂泥:jira7.2安装、中文及破解
    烂泥:VMWare Workation双网卡配置IP地址
    烂泥:centos6 yum方式升级内核
    烂泥:python2.7和python3.5源码安装
    烂泥:zabbix3.0安装与配置
    烂泥:利用awstats分析nginx日志
    烂泥:切割nginx日志
    JavaScript之函数
    Django之根据已经存在数据库中的表自动生成模型
    Django之操作数据库
  • 原文地址:https://www.cnblogs.com/bala/p/15693615.html
Copyright © 2011-2022 走看看