浅谈vue响应式

发布时间:2024年01月12日
  1. 响应式简单理解:当一个对象的属性发生变化的时候调用一个回调函数

  2. 要想做到上述功能需要具备两个条件

    • 属性的写入和读取必须可以被拦截(被vue管理)
    • 属性必须在回调函数或watch函数中被读取,这样才能记录属性之后被写入的时候应该调用哪个函数
  3. 回调函数有三种,如下

    • 渲染函数,即模板代码,模板代码会被编译成渲染函数。这也是为什么吗属性变化会渲染页面的原因
    • 监听器:实际上是我们传递给监听器的回调函数。
    • 计算属性:同监听器
  4. 响应实现

    • 实现条件一
      • data中的属性,在组件初始化的时候实现条件一
      • Vue.set 方法
      • vue3中的ref,reactive
    • 实现条件二
      • 三种函数会在组件初始化时被调用
      • 三种函数在属性变化时会在此被调用
  5. 一些常见的响应式失效问题

    • 动态的为对象添加属性
      • 不满足条件1
    • Vue.set方法添加的属性页面上没有效果
      • 不满足条件2,虽然被vue管理了,但是没有被回调函数访问过
    • vue3 watch失效
          let a=reactive({b:0})
          watch(a.b)
      
      • 不满足条件1,虽然a响应式的,a.b返回了0,0并没有被vue管理
      • 不满足条件2,虽然a响应式的,a.b并没有在watch的函数中被调用。
        改为如下可以
          let a=reactive({b:0})
          watch(()=>a.b)
      
      为什么作为函数返回值就可以?因为作为函数,会被延后调用,延后到watch函数调用的时候才调用。
  6. vue3的effectScope

    • 在vue3中三种函数都会创建一个scope(域)来管理回调函数,scope和回调函数是一对多的关系。scope可以被停止,即移除条件二
    • 可以认为 watch,compute和渲染函数是一个单函数的effectScope
    • scope中的回调函数会被一次一起执行完,所以把多个watch,compute和渲染函数放在一个域中,会提升效率
文章来源:https://blog.csdn.net/TheThirdMoon/article/details/135548185
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。