经验总结

  1. 首页 > 生活 > >

19_Vue如何监测到对象类型数据发生改变的？( 二 )

生活百科

  • 那么其内部是如何进行数据代理的呢？
  • 如果不使用 vue框架，我们能实现数据代理吗？
  • 我们来测试一下
    • 错误测试
    • 按照正常的理解，如果我们需要对age这个属性进行数据代理
    • 让页面能够检测到数据的改变，那么就需要使用这个接口（defined......）
    • 那么这个接口的调用，需要如下几个配置
      • 需要给谁添加属性
      • 属性名是什么
      • 配置项（getter和setter）
    • 那么对getter而言，如果该属性被访问到了，那么就需要返回该属性的值

      • 19_Vue如何监测到对象类型数据发生改变的？

        文章插图
    • 对setter而言，当属性值，发生修改，那么将接收到的修改的属性值，重新赋值给该属性

    19_Vue如何监测到对象类型数据发生改变的？

    文章插图
    我们虽然添加的是age，但是这里的意思是将原有属性age覆盖掉，使用这个新的age
    我们来看下测试结果
    19_Vue如何监测到对象类型数据发生改变的？

    文章插图
    出现bug的原因
    • 其实这个问题很好理解，我们看下错误原因

      • 19_Vue如何监测到对象类型数据发生改变的？

        文章插图
    • 这是一个 无限递归产生的bug，该方法一直无限的被调用，从而产生了这个错误
    • 为什么呢？
    • 我们仔细看下这段代码

      1. 19_Vue如何监测到对象类型数据发生改变的？

        文章插图
      2. 当，age属性被访问的时候，会调用get函数
      3. 调用get函数，会返回age
      4. 返回的过程当中，age是不是又被访问了
      5. 从而产生死循环，无限递归
    • 为什么无法修改属性呢？也是这个道理
    所以，vue底层的数据代理，或者说数据加工没有我们想的这么简单，那么人家是怎么实现的呢
    Observer
    • 在vue当中，有个接口叫做Observer，这个接口用来监视页面数据发生的变化
    • 不过他底层是如何进行监听的呢
    • 我们写不到底层那么详细，只写主要的部分
    准备工作1、首先我们准备一个data，这里面存放了两个属性，name和age
    19_Vue如何监测到对象类型数据发生改变的？

    文章插图
    2、我们创建一个function ==> Observer
    19_Vue如何监测到对象类型数据发生改变的？

    文章插图
    然后实例化这个 Observer，js当中，function是可以当做构造函数使用的
    19_Vue如何监测到对象类型数据发生改变的？

    文章插图
    该函数需要一个属性，从参数名可以看出，这是一个对象属性
    3、现在我们就来配置这个对象，首先我们需要获取到 data这个对象当中的所有key值
    19_Vue如何监测到对象类型数据发生改变的？

    文章插图
    4、对这个数组，进行循环
    19_Vue如何监测到对象类型数据发生改变的？

    文章插图
    5、在迭代的过程当中，使用definedProperty进行数据代理
    19_Vue如何监测到对象类型数据发生改变的？

    文章插图
    参数解析，为什么这里，添加数据的对象（参数1） 是 this？
    1. 使用this，那么就是给 this所指向的对象 ==> Observer；也就是我们刚刚实例化出来的对象

      • 19_Vue如何监测到对象类型数据发生改变的？

        文章插图
    2. 给它添加属性（property参数）
    3. 那么接下来我们就在 参数三 当中配置get和set了
    6、get和set

    经验总结扩展阅读


    上一篇：水果店名字最吸引人起名 精品水果店名字6000个

    下一篇：空姐工资一般多少钱一个月 薪资待遇多少