vue3中其他的一些响应式函数（shallowRef shallowReactive shallowReadonly等等）

**Vue3 中的响应式函数**

在 Vue3 中，响应式函数是用于创建响应式数据的关键组件。这些函数可以帮助我们轻松地管理应用程序中的状态，并且它们与 Vue 的核心功能紧密集成。

### **1. shallowRef**

`shallowRef` 是一个用于创建浅层响应式引用（Shallow Ref）的函数。它接受一个原始值作为参数，并返回一个响应式引用。

javascriptimport { shallowRef } from 'vue'

const originalValue = {
 a:1,
 b:2}

const shallowRefValue = shallowRef(originalValue)

console.log(shallowRefValue.value) // { a:1, b:2 }

在上面的示例中，我们创建了一个原始值 `originalValue`，然后使用 `shallowRef` 创建了一个响应式引用 `shallowRefValue`。我们可以通过访问 `value` 属性来获取原始值。

### **2. shallowReactive**

`shallowReactive` 是一个用于创建浅层响应式对象的函数。它接受一个原始对象作为参数，并返回一个响应式对象。

javascriptimport { shallowReactive } from 'vue'

const originalObject = {
 a:1,
 b:2}

const shallowReactiveValue = shallowReactive(originalObject)

console.log(shallowReactiveValue.a) //1console.log(shallowReactiveValue.b) //2shallowReactiveValue.c =3console.log(originalObject) // { a:1, b:2 }

在上面的示例中，我们创建了一个原始对象 `originalObject`，然后使用 `shallowReactive` 创建了一个响应式对象 `shallowReactiveValue`。我们可以通过访问属性来获取值。

### **3. shallowReadonly**

`shallowReadonly` 是一个用于创建浅层只读引用（Shallow Readonly Ref）的函数。它接受一个原始值作为参数，并返回一个只读引用。

javascriptimport { shallowReadonly } from 'vue'

const originalValue = {
 a:1,
 b:2}

const shallowReadonlyValue = shallowReadonly(originalValue)

console.log(shallowReadonlyValue.value) // { a:1, b:2 }

在上面的示例中，我们创建了一个原始值 `originalValue`，然后使用 `shallowReadonly` 创建了一个只读引用 `shallowReadonlyValue`。我们可以通过访问 `value` 属性来获取原始值。

### **4. readonly**

`readonly` 是一个用于创建只读对象的函数。它接受一个原始对象作为参数，并返回一个只读对象。

javascriptimport { readonly } from 'vue'

const originalObject = {
 a:1,
 b:2}

const readonlyValue = readonly(originalObject)

console.log(readonlyValue.a) //1console.log(readonlyValue.b) //2readonlyValue.c =3try {
 console.log(originalObject)
} catch (error) {
 console.error(error) // Error: Cannot modify a read-only object.
}

在上面的示例中，我们创建了一个原始对象 `originalObject`，然后使用 `readonly` 创建了一个只读对象 `readonlyValue`。我们可以通过访问属性来获取值。

### **5. toRaw**

`toRaw` 是一个用于从响应式引用或响应式对象中获取原始值的函数。它接受一个响应式引用或响应式对象作为参数，并返回原始值。

javascriptimport { shallowRef, toRaw } from 'vue'

const originalValue = {
 a:1,
 b:2}

const shallowRefValue = shallowRef(originalValue)

console.log(toRaw(shallowRefValue)) // { a:1, b:2 }

在上面的示例中，我们创建了一个原始值 `originalValue`，然后使用 `shallowRef` 创建了一个响应式引用 `shallowRefValue`。我们可以通过调用 `toRaw` 来获取原始值。

### **6. trigger**

`trigger` 是一个用于触发响应式对象或响应式引用的更新的函数。它接受一个响应式对象或响应式引用作为参数，并返回该对象或引用本身。

javascriptimport { shallowReactive, trigger } from 'vue'

const originalObject = {
 a:1,
 b:2}

const shallowReactiveValue = shallowReactive(originalObject)

trigger(shallowReactiveValue)
console.log(shallowReactiveValue.a) //1console.log(shallowReactiveValue.b) //2

在上面的示例中，我们创建了一个原始对象 `originalObject`，然后使用 `shallowReactive` 创建了一个响应式对象 `shallowReactiveValue`。我们可以通过调用 `trigger` 来触发更新。

### **7. effect**

`effect` 是一个用于创建一个副作用函数的函数。它接受一个回调函数作为参数，并返回该函数本身。

javascriptimport { effect } from 'vue'

const callback = () => {
 console.log('Hello, World!')
}

const effectValue = effect(callback)

console.log(effectValue) // [Function: callback]

在上面的示例中，我们创建了一个回调函数 `callback`，然后使用 `effect` 创建了一个副作用函数 `effectValue`。我们可以通过调用该函数来执行回调。

### **8. onScopeDispose**

`onScopeDispose` 是一个用于注册一个函数，当当前作用域被销毁时触发的函数。它接受一个回调函数作为参数，并返回该函数本身。

javascriptimport { onScopeDispose } from 'vue'

const callback = () => {
 console.log('Goodbye, World!')
}

onScopeDispose(callback)

console.log(onScopeDispose) // [Function: callback]

在上面的示例中，我们创建了一个回调函数 `callback`，然后使用 `onScopeDispose` 注册了该函数。我们可以通过调用该函数来执行回调。

### **9. watch**

`watch` 是一个用于监视一个响应式对象或响应式引用的变化的函数。它接受两个参数：第一个是要监视的响应式对象或响应式引用，第二个是回调函数。

javascriptimport { shallowReactive, watch } from 'vue'

const originalObject = {
 a:1,
 b:2}

const shallowReactiveValue = shallowReactive(originalObject)

watch(shallowReactiveValue, (newValue) => {
 console.log(newValue)
})

shallowReactiveValue.c =3console.log(originalObject) // { a:1, b:2 }

在上面的示例中，我们创建了一个原始对象 `originalObject`，然后使用 `shallowReactive` 创建了一个响应式对象 `shallowReactiveValue`。我们可以通过调用 `watch` 来监视该对象的变化。

### **10. watchEffect**

`watchEffect` 是一个用于监视一个响应式对象或响应式引用的变化，并执行回调函数的函数。它接受两个参数：第一个是要监视的响应式对象或响应式引用，第二个是回调函数。

javascriptimport { shallowReactive, watchEffect } from 'vue'

const originalObject = {
 a:1,
 b:2}

const shallowReactiveValue = shallowReactive(originalObject)

watchEffect(() => {
 console.log(shallowReactiveValue)
})

shallowReactiveValue.c =3console.log(originalObject) // { a:1, b:2 }

在上面的示例中，我们创建了一个原始对象 `originalObject`，然后使用 `shallowReactive` 创建了一个响应式对象 `shallowReactiveValue`。我们可以通过调用 `watchEffect` 来监视该对象的变化。

这些是 Vue3 中的一些响应式函数，它们可以帮助我们管理应用程序中的状态，并且它们与 Vue 的核心功能紧密集成。