zoukankan      html  css  js  c++  java
  • Vue数据双向绑定原理

    一 Vue数据双向绑定原理:

    Vue数据双向绑定原理是通过数据劫持结合发布者-订阅者模式的方式来实现的,首先是对数据进行监听,然后当监听的属性发生变化时则告诉订阅者是否要更新,若更新就会执行对应的更新函数从而更新视图。

    二 在vue2.x版本中,数据劫持是用过Object.defineProperty这个API来实现:

    Object.defineProperty的一些问题

    • 递归遍历所有的对象的属性,这样如果我们数据层级比较深的话,是一件很耗费性能的事情
    • 只能应用在对象上,不能用于数组
    • 只能够监听定义时的属性,不能监听新加的属性,这也就是为什么在vue中要使用Vue.set的原因,删除也是同理 

    三 在vue3版本中,使用了proxy去实现对象的监听,避免了以上问题的出现,下面我们用proxy实现一个简易版本的数据劫持:Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。

    • proxy可以直接监听数组的修改
    • proxy可以直接监听属性的新增和删除
    • 在实现深度监听的时候,只有在data对象的属性被访问的时候,才去对这个属性做监听处理,而不是一次性递归所有的。

    推荐阅读:

    Vue如何实现数据劫持:https://zhuanlan.zhihu.com/p/111591503

  • 相关阅读:
    for...in 循环对象原型链问题
    移动端表单禁用软键盘
    将一个普通数组映射为对象数组
    npm install命令详解
    Elasticsearch High Level REST Client
    Guava: Google Core Libraries for Java
    Java Interview Programming Questions
    2017 OWASP TOP 10
    17 Popular Java Frameworks in 2018
    10 Popular PHP frameworks in 2019
  • 原文地址:https://www.cnblogs.com/terrymin/p/14702962.html
Copyright © 2011-2022 走看看