vue3-基础知识（2）- 响应式

• 对象替换：一个包含对象类型值的 ref 可以响应式地替换整个对象
• 参数传递和解构：ref 被传递给函数或是从一般对象上被解构时，不会丢失响应性
• ref属性替换：如果将一个新的 ref 赋值给一个关联了已有 ref 的属性，那么它会替换掉旧的 ref

• 顶层属性时：仅当 ref 是模板渲染上下文的顶层属性时才适用自动“解包”
• 深层响应式对象：当一个 ref 被嵌套在一个reactive（响应式对象）中，作为属性被访问或更改时，它会自动解包。
• 数组、Map：当 ref 作为响应式数组或像 Map 这种原生集合类型的元素被访问时，不会进行解包。
• 在模板中：自动解包
• 作为浅层响应式对象的属性被访问：不会解包。

• 默认关闭
  • Vite启用
  • vue@^3.2.25
  • @vitejs/plugin-vue@>=2.0.0
  • 用于 SFC 和 js(x)/ts(x) 文件
  • 配置

  // vite.config.js
    export default {
      plugins: [
        vue({
          reactivityTransform: true
        })
      ]
    }
  1
  2
  3
  4
  5
  6
  7
  8

  • 其他启用方式：vue-cli/webpack+vue-loader
• API宏
  • 自动引入：宏函数都是全局可用的、无需手动导入。
  • 手动引入：import { $ref } from 'vue/macros'
  • 用法： 前缀$ + API。eg：ref => $ref，不需要再使用var.value，而是直接使用var
• 手动解构：$() 宏
  • 返回toRef()包装后的值。
  • 适用于响应式对象和包含数个 ref 的对象。
  • 会返回 ref 的函数。Vue 编译器并不能够提前知道该函数会返回一个 ref。需使用$() 宏来将现存的 ref 转换为响应式变量。

• 痛点：
  • 无法解构defineProps。必须使用props.x。
  • 当使用基于类型的 props 的声明时，无法很方便地声明这些 prop 的默认值。
• 解决：当 defineProps 与解构一起使用时，我们可以通过应用编译时转换来解决这些问题，类似于我们之前看到的 $()。

• 响应式丢失
  • 以参数形式传入函数
    • 问题：直接传入ref会丢失响应式，fn($ref)编译结果会是fn($ref.value)。而函数内期望是传入一个$ref
    • 解决：使用$$(ref) 包装，效果是去掉.value。
  • 将响应式变量直接放在返回值表达式中
    • 问题：return { x, y } => return { x: x.value, y: y.value }
    • 解决：return $$({ x, y })
  • 已解构props
    • 适用：const { prop } = defineProps({a: 1}); fn($$prop);，解析成toRef()包裹。

      (1)definedProxy           (2)proxy-reactive   (3)value setter-ref
缺点  数组和属性删除等拦截不了     不兼容ie11         只拦截了value
优点  兼容                        全拦截             实现简单   
1
2
3

  // 在同一个对象上调用 reactive() 会返回相同的代理
  console.log(reactive(raw) === proxy) // true

  // 在一个代理上调用 reactive() 会返回它自己
  console.log(reactive(proxy) === proxy) // true
1
2
3
4
5

• 仅对对象类型有效
• 不可“替换”对象，否则丢失属性相应链接。（使用ref）
• 将属性赋值或解构至本地变量，将该属性传入一个函数时，我们会失去响应性。（使用ref）