vue3【实用教程】声明响应式状态（含 ref，模板引用，reactive，toRef，toRefs ，isRef， isReactive，isProxy，unref 等）

Vue 3 中的数据基于 JavaScript Proxy (代理) 实现响应式
( vue2 中的数据通过 Object.defineProperty() 方法和对数组变异方法的重写，实现响应式)

组合式 API

方式一 ref 【推荐】

所有类型的数据，都推荐使用 ref 声明响应式。

import { ref } from 'vue'

// 定义一个初始值为数字 0 的响应式变量 countRef  
const countRef = ref(0)

// 得到一个带有 .value 属性的 ref 对象
console.log(countRef ) // { value: 0 }

// 通过 .value 访问 ref 响应式变量的值
console.log(countRef.value) // 0

// 通过 .value 修改 ref 响应式变量的值
countRef.value++

• 参数为响应式变量的初始值（当参数是一个对象时，ref() 会在内部调用reactive() ）
• 返回一个带有 .value 属性的 ref 对象
• 建议变量名以Ref为后缀，以便识别其是一个 ref 对象
• 模板中使用时，ref 对象会自动解包，无需使用.value

<button @click="countRef++">
  {{ countRef }}
</button>

• ref 对象在作为响应式对象的属性被访问或修改时会自动解包。

const countRef = ref(0)

// reactive 的用法详见下文
const state = reactive({
  count:countRef 
})

console.log(state.count) // 0 ,无需写成 state.count.value

state.count = 1 // 无需写成 state.count.value
console.log(countRef.value) // 1

模板引用（ 获取 DOM ）

即 vue2 中的 this.$refs

<script setup>
import { ref, onMounted } from 'vue'

// 获取到 ref 属性为 input 的模板元素的引用（ref 变量名必须和模板里的 ref 属性值相同）
const input = ref(null)

// 生命周期：DOM 挂载完成
onMounted(() => {
  // input 输入框获得焦点（注意此处需使用.value）
  input.value.focus()
})
</script>

<template>
  <!-- ref 属性为 input 的模板元素 -->
  <input ref="input" />
</template>

v-for 中使用模板引用时，对应的 ref 中包含的值是一个数组（ ref 数组并不保证与源数组相同的顺序 ）

vue3.2.25 +

<script setup>
import { ref, onMounted } from 'vue'

const list = ref([
  /* ... */
])

const itemRefs = ref([])

onMounted(() => console.log(itemRefs.value))
</script>

<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

ref 属性还可以绑定一个函数（内联函数 / 组件上的方法），函数的第一个参数是元素引用，在每次组件更新时都被调用。

<input :ref="(el) => { /* 将 el 赋值给一个数据属性或 ref 变量 */ }">

元素被卸载时，函数也会被调用一次，此时的 el 参数会是 null。

在自定义组件上使用模板引用时，只能获取到子组件通过 defineExpose 暴露的内容

<!--父组件-->
<script setup>
import { ref, onMounted } from 'vue'
import Child from './Child.vue'

const child = ref(null)

onMounted(() => {
  // child.value 是 <Child /> 组件的实例
})
</script>

<template>
  <Child ref="child" />
</template>

<!--子组件-->
<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

// 像 defineExpose 这样的编译器宏不需要导入
defineExpose({
  a,
  b
})
</script>

父组件通过子组件的 ref 只能获取到 { a: 1, b: 2 }

为什么需要 ref

因为 vue3 的响应式是通过 proxy 实现的，但 proxy 只能给对象添加响应式，无法给值类型的数据添加响应式，所以需要通过 ref() 函数先将值类型的数据包装成一个带 value 属性的 ref 对象，才能实现值类型数据的响应式。

为什么需要 .value

因为 ref() 函数返回的是一个 ref 对象，响应式变量的值存储在 ref 对象的value 属性中，所以在 js 中读取和修改响应式变量的值的时候，都需要 .value ，但在以下情况中，为了方便使用，vue 对 ref 对象进行了自动解包，所以无需 .value

1. 模板中使用 ref 对象
2. ref 对象作为响应式对象的属性被访问或修改

TS 中给 ref 声明类型

ref 会根据初始化时的值推导其类型

// 推导出的类型：Ref<number>
const year = ref(2020)

但比较复杂的数据类型，需用 Ref

import { ref } from 'vue'
import type { Ref } from 'vue'

interface userInfo {
  id: number
  name: String
}

const userList: Ref<userInfo[]> = ref([])

方式二 reactive

用于创建对象类型数据的响应式。

import { reactive } from 'vue'

const state = reactive({ count: 0 })

<button @click="state.count++">
  {{ state.count }}
</button>

• reactive() 无需对源数据添加类似 ref 的包装，可使对象本身具有响应性
• reactive() 返回的是一个原始对象的 Proxy，它和原始对象是不相等的

const raw = {}
const proxy = reactive(raw)

// 代理对象和原始对象不是全等的
console.log(proxy === raw) // false

reactive() 的局限性

• 只能用于对象类型数据 (对象、数组和如 Map、Set 这样的集合类型)，不能用于 string、number 或 boolean 这样的值类型数据
• 替换整个对象会丢失响应式（Vue 的响应式跟踪是通过属性访问实现的），所以只能通过修改属性来修改 reactive() 创建的响应式变量。
• 解构会丢失响应式

const state = reactive({ count: 0 })

// 当解构时，count 已经与 state.count 断开连接
let { count } = state
// 不会影响原始的 state
count++

其他相关 API

vue 提供了专门的API 来实现在不丢失响应式的情况下，解构响应式对象（reactive 创建），它们不创造响应式 （如 ref , reactive），而是延续响应式 (toRef , toRefs) ！

toRef()

基于响应式对象上的属性，创建 ref (与源属性保持同步)

• 第一个参数为 响应式对象（reactive 创建）
• 第二个参数为 属性名

const state = reactive({
  foo: 1
})

// 基于响应式对象 state 上的属性 foo ，创建 ref
const fooRef = toRef(state, 'foo')

// 更改该 ref 会更新源属性
fooRef.value++
console.log(state.foo) // 2

// 更改源属性也会更新该 ref
state.foo++
console.log(fooRef.value) // 3

vue3.3+ 新增了将值、refs 或 getters 规范化为 refs 的功能，详见官网
https://cn.vuejs.org/api/reactivity-utilities.html#toref

toRefs()

将响应式对象转换为每个属性都指向源对象相应属性的 ref 的普通对象

• 推荐用法：合成函数返回响应式对象时，使用 toRefs，以便解构赋值时不丢失响应式。（详见下文的范例）

const state = reactive({
  foo: 1,
  bar: 2
})

// 得到一个每个属性都是 ref 的普通对象
const stateAsRefs = toRefs(state)
/*
stateAsRefs 的类型：{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// 源属性改变，Refs 对象里的 ref 属性会同步改变
state.foo++
console.log(stateAsRefs.foo.value) // 2

// Refs 对象里的 ref 属性改变，源属性会同步改变
stateAsRefs.foo.value++
console.log(state.foo) // 3

应用范例：解构对象属性，简化模板引用

<!-- 组合式API -->
<script setup>
import { reactive, toRefs } from "vue";

function getMyInfo() {
  const me = reactive({
    name: "朝阳",
    age: 35,
  });

  // 使用 toRefs 避免丢失响应式
  return toRefs(me);
}

// 通过解构赋值，便于模板中使用
let { name, age } = getMyInfo();

const changeName = () => {
  name.value = "张三";
};
</script>

<template>
  <p>姓名：{{ name }}</p>
  <p>年龄：{{ age }}</p>
  <button @click="changeName">改名</button>
</template>

isRef()

判断是否为 ref

let age = ref(35)
if (isRef(age)) {
}

isReactive()

判断一个对象是否是由 reactive() 或 shallowReactive() 创建的代理。

isProxy()

判断一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创建的代理。

unref()

对 ref 对象解包，是 isRef(val) ? val.value : val 的语法糖

选项式 API

用 data 选项声明响应式状态，值为返回一个对象的函数。

• 在创建组件实例的时候会调用此函数
• 函数返回的对象会用响应式系统进行包装

  data() {
    return {
      count: 1
    }
  },

注意事项

• data 的顶层属性避免用 $和_开头（Vue 在组件实例上暴露的内置 API 使用 $ 作为前缀，也为内部属性保留 _ 前缀。）
• 未在data中定义的组件实例新属性，无法触发响应式更新。
• 始终通过 this 来访问响应式状态

  data() {
    return {
      someObject: {}
    }
  },
  mounted() {
    const newObject = {}
    this.someObject = newObject

    console.log(newObject === this.someObject) // false
  }

这里原始的 newObject 不会变为响应式。