ref, toRef, toRefs,defineComponent, computed, unref, reactive, toRaw, watchEffect, onUpdated 前端API总结

ref

1 ref 是 Vue 3 中用于创建响应式数据的 API，它可以将任何 JavaScript 类型的数据变成响应式数据。比如

import { ref } from 'vue'

const count = ref(0) // 创建一个初始值为 0 的计数器
console.log(count.value) // 0

count.value++ // 对响应式数据进行赋值或修改时需要通过 value 属性来访问
console.log(count.value) // 1

toRef

2 toRef 是 Vue 3 中用于将某个对象的属性转换成响应式数据的 API，它接受两个参数：第一个参数是要转换的对象，第二个参数是属性名

import { toRef, reactive } from 'vue'

const user = reactive({
  name: 'Tom',
  age: 18
}
// reactive 会将一个普通对象变为响应式对象   对象中的属性也是响应式的

const ageRef = toRef(user, 'age')
console.log(ageRef.value) // 18

ageRef.value++
console.log(user.age) // 19

import { toRef } from 'vue'

const user = {
  name: 'Tom',
  age: 18
}

const ageRef = toRef(user, 'age')

console.log(ageRef.value) // 18

ageRef.value++
console.log(user.age) // 19

toRefs

3 toRefs 是 Vue 3 中用于将一个响应式对象中的所有属性都转换成 ref 对象的 API，它接受一个响应式对象作为参数，返回一个新的对象，新对象的每个属性都是一个 ref 对象

toRefs 是一个将响应式对象转换为普通对象的函数，其中对象的每个属性都是一个 ref 对象。toRefs 通常与 reactive 一起使用，用于将响应式对象解构并传递给子组件，以便在子组件中访问和修改其属性

toRefs 函数的作用是将响应式对象中的每个属性都转换为 ref 对象，并返回一个包含这些 ref 对象的普通对象。这样做的目的是为了在模板或组件中能够直接访问并响应式地使用这些属性。

import { toRefs, reactive } from 'vue'

const user = reactive({
  name: 'Tom',
  age: 18
})

const refs = toRefs(user)
console.log(refs.name.value) // Tom
console.log(refs.age.value) // 18

refs.age.value++
console.log(user.age) // 19

将响应式对象传递给子组件：

<template>
  <child-component :user="user"></child-component>
</template>

<script>
import { reactive, toRefs } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const user = reactive({
      name: 'Tom',
      age: 18
    });

    return {
      user: toRefs(user)
    };
  }
}
</script>
/* 上述代码中，通过 reactive 创建了一个响应式对象 user，在 setup 函数中使用 toRefs 将其转换为可响应的普通对象，并将其作为子组件的属性进行传递 */

在子组件中访问响应式对象的属性：

<template>
  <div>
    <p>Name: {{ user.name }}</p>
    <p>Age: {{ user.age }}</p>
  </div>
</template>

<script>
import { toRefs } from 'vue';

export default {
  props: {
    user: Object
  },
  setup(props) {
    const userRef = toRefs(props.user);

    return {
      user: userRef
    };
  }
}
</script>
/*
上述代码中，通过 toRefs 将传入的响应式对象 user 转换为普通对象，并在 setup 函数中将其转换后的引用赋值给变量 userRef。然后在模板中使用 userRef 访问 user 对象的属性。
*/

defineComponent

4 defineComponent 是 Vue 3 中用于定义组件选项的 API，它接受一个对象作为参数，该对象包含了组件中的各种选项

import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(props) {
    return {
      greeting: `Hello, ${props.msg}!`
    }
  }
})

computed

5 computed 是 Vue 3 中用于创建计算属性的 API，它接受一个函数作为参数，该函数返回一个响应式的数据

import { computed, ref } from 'vue'

const count = ref(0)

const double = computed(() => count.value * 2)
console.log(double.value) // 0

count.value++
console.log(double.value) // 2

unref

6 unref 是 Vue 3 中用于获取 ref 对象的值的 API，它可以接受任意类型的参数，如果参数是 ref 对象，则返回其 value 属性的值，否则返回参数本身

import { ref, reactive, unref } from 'vue'

const count = ref(0)
console.log(unref(count)) // 0

const user = reactive({ name: 'Tom' })
console.log(unref(user)) // { name: 'Tom' }

reactive

7 reactive 是 Vue 3 中用于将某个对象转换成响应式数据的 API，它接受一个对象作为参数，返回一个新的响应式对象

import { reactive } from 'vue'

const user = reactive({
  name: 'Tom',
  age: 18
})

console.log(user.name) // Tom

user.age++
console.log(user.age) // 19

toRaw

8 toRaw 是 Vue 3 中用于获取一个响应式对象的原始对象的 API，它接受一个响应式对象作为参数，返回其对应的原始对象 toRaw返回对象的原始值 不做处理

import { reactive, toRaw } from 'vue'

const user = reactive({ name: 'Tom' })

const rawUser = toRaw(user)
console.log(rawUser) // { name: 'Tom' }

user.name = 'Jack'
console.log(rawUser) // { name: 'Jack' }

常见应用场景是在需要对比对象引用是否相等时使用

import { reactive } from 'vue'

const obj1 = reactive({ foo: 'bar' })
const obj2 = reactive({ foo: 'bar' })

console.log(obj1 === obj2) // 输出：false

//在上述示例中，我们创建了两个相同的响应式对象，但它们的引用不同，所以直接比较它们的引用结果为 false。

为了解决这个问题，我们可以使用 toRaw 函数获取响应式对象的原始值，然后再比较它们的引用。

import { reactive, toRaw } from 'vue'

const obj1 = reactive({ foo: 'bar' })
const obj2 = reactive({ foo: 'bar' })

console.log(toRaw(obj1) === toRaw(obj2)) // 输出：true

watchEffect

9 watchEffect 是 Vue 3 中用于监听数据变化并执行副作用函数的 API，该 API 不需要显式地指定要监听的数据源，而是自动地检测代码中所使用的响应式数据，并在数据变化时自动执行副作用函数。

可以理解为watchEffect监听其作用域内的所有响应式对象的变化。当任何一个响应式对象发生变化时，watchEffect都会执行其中的回调函数。这样可以方便地实现对多个响应式对象的监听和处理。在Vue 3中，watchEffect是一个非常有用的API，可以帮助我们简洁地处理响应式数据的变化。

watchEffect会立即执行传入的回调函数，并在其中自动追踪响应式数据的变化。无论响应式数据是否被使用，只要发生变化，回调函数就会执行

import { reactive, watchEffect } from 'vue'

const user = reactive({ name: 'Tom', age: 18 })

watchEffect(() => {
  console.log(`${user.name} is ${user.age} years old`)
})

user.age++ // 输出 "Tom is 19 years old"
user.name = 'Jack' // 输出 "Jack is 19 years old"s

watch 监听需指定监听的数据源 并在数据变化后执行相应的回调函数。只有在监听的响应式数据发生变化时，才会执行回调函数。watch的回调函数接收两个参数：新值和旧值。通过这两个参数，可以比较新旧值之间的差异并进行相应的处理

import { watch, reactive } from 'vue';

// 创建一个响应式对象
const state = reactive({
  count: 0,
});

// 使用 watch 监听 count 的变化
watch(
  () => state.count, // 监听的响应式数据
  (newValue, oldValue) => {
    console.log(`count 从 ${oldValue} 变成了 ${newValue}`);
  }
);

// 修改 count 的值
state.count++; // 控制台会输出 "count 从 0 变成了 1"

onUpdated

10 onUpdated 是 Vue 3 中用于在组件更新后执行回调函数的 API，它接受一个函数作为参数，该函数会在组件更新后被调用

import { onUpdated, reactive } from 'vue'

const user = reactive({ name: 'Tom', age: 18 })

onUpdated(() => {
  console.log('组件已更新')
})

user.age++ // 输出 "组件已更新"