Vue3从入门到实战：深度了解相关API

shallowRef

1. 作用：创建一个响应式数据，但只对顶层属性进行响应式处理。

2. 用法：

   let myVar = shallowRef(initialValue);

3. 特点：只跟踪引用值的变化，不关心值内部的属性变化。

shallowReactive

1. 作用：创建一个浅层响应式对象，只会使对象的最顶层属性变成响应式的，对象内部的嵌套属性则不会变成响应式的

2. 用法：

   const myObj = shallowReactive({ ... });

3. 特点：对象的顶层属性是响应式的，但嵌套对象的属性不是。

1.shallowRef 与 shallowReactive

我们直接使用代码解释如何使用。

新建App.vue实现了一个简单的求和和修改人物信息的功能。

我们使用 ref 创建了名为 sum 和 person 的响应式引用

changeSum 函数在点击按钮时将 sum 的值加1，changeName 函数将 person 的姓名修改为 “李四”，changeAge 函数将 person 的年龄加1，changePerson 函数将整个 person 对象替换为一个新的对象。

展示：

当我点击按钮时：

现在，我将shallowRef来替换掉Ref

这是为什么呢？

因为shallowRef是浅层响应的意思，它只能调用第一层，深层次的则不行

你可以这么理解，就只能有一个.value，后面再跟就没有响应了。

而shallowReactive的作用跟shallowRef一样的，不赘述了

作用：

shallowRef 的作用是将一个普通的 JavaScript 对象或数组转换为响应式对象，但不会递归地将对象或数组中的每个属性或元素都转换为响应式。这意味着当你修改对象或数组的属性或元素时，不会触发视图的更新。

与之相反，ref 会将对象或数组的每个属性或元素都转换为响应式。这意味着当你修改对象或数组的属性或元素时，视图将会自动更新。

换言之，如果我们修改了对象内部属性或数组内部元素，视图不会自动更新。只有当我们修改了对象或数组本身时，视图才会更新以反映这种变化。这种行为适用于当我们只关心对象或数组的引用变化，而不关心其内部属性或元素的具体变化时。这样可以提高性能，减少不必要的监测和更新操作。

总而言之：

通过使用 shallowRef() 和 shallowReactive() 来绕开深度响应。浅层式 API 创建的状态只在其顶层是响应式的，对所有深层的对象不会做任何处理，避免了对每一个内部属性做响应式所带来的性能成本，这使得属性的访问变得更快，可提升性能。

2.readonly 与 shallowReadonly

1. 作用：用于创建一个对象的深只读副本。

2. 用法：

   const original = reactive({ ... });
   const readOnlyCopy = readonly(original);

3. 特点：

   • 对象的所有嵌套属性都将变为只读。
   • 任何尝试修改这个对象的操作都会被阻止（在开发模式下，还会在控制台中发出警告）。

readonly 和 shallowReadonly 是 Vue 3 中提供的用于创建只读的响应式引用的函数。

概念：

想象一下，你有一个对象或数组，你希望它在被使用的时候不能被修改。就好像你给别人一个只读的物品，他们可以查看它，但不能改变它的内容。

readonly 的作用就是将一个对象或数组转换为只读的响应式引用。这意味着当你使用 readonly 创建的变量时，它是只读的，你不能直接修改它的值。如果你尝试修改它，Vue 3 会发出警告，并且不会更新视图。

shallowReadonly 与 readonly 类似，也是用于创建只读的响应式引用，但它是浅层只读的。这意味着，如果你使用 shallowReadonly 创建的变量是一个对象或数组，你可以阅读它的属性或元素，但不能修改属性或元素的值。然而，如果属性或元素是对象或数组，你可以修改它们的值。这样做是为了保持引用的只读特性，同时允许引用内部的对象或数组进行更改。

readonly：

下面运用例子解释：

这段代码是一个网页应用，有两个按钮和两个显示结果的文本。你可以点击按钮来增加两个求和的结果。

甚至你会注意代码第22行报错，就是因为sum2提示只能读不能改。

报错的原因简单讲就是，里面不能是数据类型的参数，要放入的是具有响应式的参数，同时要把后面的.value去掉。

其中，sum1 是一个可以被修改的变量，表示一个求和结果。而 sum2 是一个只读的变量，它的值始终与 sum1 相同，但不能直接修改它。

当你点击 “点我sum1+1” 按钮时，sum1 的值会加1，而页面上显示的结果会更新。但是，当你点击 “点我sum2+1” 按钮时，尽管 sum2 的值与 sum1 相同，但它是只读的，不能直接修改它。因此，点击这个按钮并不会改变 sum2 的值，也不会更新页面上的结果。

这在某些情况下很有用，例如当你想向其他组件传递数据，但不希望其他组件能够修改它。readonly 可以确保数据的稳定性和可靠性，避免不必要的副作用。

展示：

补充：

报错的原因简单讲就是，里面不能是数据类型的参数，要放入的是具有响应式的参数，同时要把后面的.value去掉。

shallowReadonly：

作用：与 readonly 类似，但只作用于对象的顶层属性。

用法：

const original = reactive({ ... });
const shallowReadOnlyCopy = shallowReadonly(original);

特点：

• 只将对象的顶层属性设置为只读，对象内部的嵌套属性仍然是可变的。
• 适用于只需保护对象顶层属性的场景。

下面举例子解释：

car1 是一个包含汽车信息的对象，包括品牌、选项等。car2 是一个浅层只读的变量，它与 car1 相关联，但只能修改其属性的值，而不能修改整个对象或其属性的引用。

App.vue代码：

<template>
    <div class="app">
        <h2>当前sum1为:{
   { sum1 }}</h2>
        <h2>当前sum2为:{
   { sum2 }}</h2>
        <h2>当前car1为:{
   { car1 }}</h2>
        <h2>当前car2为:{
   { car2 }}</h2>
        <button @click="changeSum1">点我sum1+1</button>
        <button @click="changeSum2">点我sum2+1</button>
        <button @click="changeBrand2">修改品牌(car2)</button>
        <button @click="changeColor2">修改颜色(car2)</button>
        <button @click="changePrice2">修改价格(car2)</button>
    </div>
</template>
<script setup lang="ts" name="App">
    import { ref,reactive,readonly,shallowReadonly } from "vue";
    let sum1 = ref(0)
    let sum2 = readonly(sum1)
    let car1 = reactive({
        brand:'奔驰',
        options:{
            color:'红色',
            price:100
        }
    })
    let car2 = shallowReadonly(car1)
    function changeSum1(){
        sum1.value += 1
    }
    function changeSum2(){
        sum2.value += 1 //sum2是不能修改的
    }
    function changeBrand2(){
        car2.brand = '宝马'
    }
    function changeColor2(){
        car2.options.color = '绿色'
    }
    function changePrice2(){
        car2.options.price += 10
    }
</script>
<style scoped>
    .app {
        background-color: #ddd;
        border-radius: 10px;
        box-shadow: 0 0 10px;
        padding: 10px;
    }
    button {
        margin:0 5px;
    }
</style>

3.toRaw 与 markRaw

关于toRaw：

1. 作用：用于获取一个响应式对象的原始对象， toRaw 返回的对象不再是响应式的，不会触发视图更新。

   官网描述：这是一个可以用于临时读取而不引起代理访问/跟踪开销，或是写入而不触发更改的特殊方法。不建议保存对原始对象的持久引用，请谨慎使用。

   何时使用？ —— 在需要将响应式对象传递给非 Vue 的库或外部系统时，使用 toRaw 可以确保它们收到的是普通对象

下面举一个例子解释：

我们使用 reactive 函数创建了一个名为 person 的响应式对象，其中包含姓名和年龄的属性。然后，我们使用 toRaw 函数获取了 person 对象的原始非响应式版本，并将其保存在 rawPerson 变量中。

toRaw 函数用于获取一个响应式对象的原始对象，即没有被包装成响应式的普通对象。在这个例子中，我们将响应式的 person 对象传递给 toRaw 函数，它返回了一个与 person 相同属性和值的普通对象。

在控制台中，我们打印了 person 和 rawPerson 的值，以展示它们之间的区别。

展示：

注意：

不建议保存对原始对象的持久引用，请谨慎使用。

就是以上使用 toRaw 函数获取了 person 对象的原始非响应式的操作。谨慎使用是为了防止person和Rawperson搞混。

关于markRaw：

1. 作用：标记一个对象，使其永远不会变成响应式的。

   例如使用mockjs时，为了防止误把mockjs变为响应式对象，可以使用 markRaw 去标记mockjs

然后用markRaw（）标记

所以被markRaw标记一个对象后，使其永远不会变成响应式的。

补充：

使用场景：使用mockjs时，为了防止误把mockjs变为响应式对象，可以使用 markRaw 去标记mockjs

Mock.js是一个用于生成随机数据和模拟HTTP请求响应的JavaScript库。它可以帮助前端开发人员在开发过程中模拟接口数据，以便更好地进行前后端分离和并行开发。

1.安装Mock.js

2.用mockjs标记

App.vue代码：

<template>
    <div class="app">
        <h2>姓名：{
   { person.name }}</h2>
        <h2>年龄：{
   { person.age }}</h2>
        <button @click="person.age += 1">修改年龄</button>
        <hr>
        <h2>{
   { car2 }}</h2>
        <button @click="car2.price += 10">点我价格+10</button>
    </div>
</template>
<script setup lang="ts" name="App">
    import { reactive,toRaw,markRaw } from "vue";
    import mockjs from 'mockjs'
    /* toRaw */
    let person = reactive({
        name:'tony',
        age:18
    })
    // 用于获取一个响应式对象的原始对象 
    let rawPerson = toRaw(person)
    // console.log('响应式对象',person)
    // console.log('原始对象',rawPerson)
    let car = markRaw({brand:'奔驰',price:100})
    let car2 = reactive(car)
    console.log(car)
    console.log(car2)
    let mockJs = markRaw(mockjs)
</script>
<style scoped>
    .app {
        background-color: #ddd;
        border-radius: 10px;
        box-shadow: 0 0 10px;
        padding: 10px;
    }
    button {
        margin:0 5px;
    }
</style>

4.customRef

概念：

我们知道，当我们在Vue中使用ref函数创建响应式数据时，它会帮助我们包装一个值，并且在这个值发生变化时通知相关的组件进行更新。这样我们就可以在组件中直接使用这个响应式数据，并且可以轻松地对其进行修改和访问。

而customRef就是一个更高级的工具，它允许我们自定义响应式引用的行为。我们可以定义一个自己的跟踪器逻辑，来决定何时触发更新、如何处理值的变化等等。这样可以满足一些特殊的需求，例如延迟更新、异步更新等。

所以，你可以将customRef看作是一个可以根据你的需求定制的响应式引用。它给了你更多的自由度和控制权，让你可以实现一些定制化的响应式行为，以适应你的项目需求。

作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行逻辑控制。

举例子解释：

现在有一个业务需求，当我在输入框修改时，标延迟1s后才显示，但是普通的ref是会立即显示，没有办法，只能用customRef（自定义的ref）

以下步骤：

1.引入customRef包，写出customRef的回调函数

2.回调函数里面写出return

3.写出get(),set()

4.导入跟踪器（track）和触发器（trigger）

重点：

跟踪器（track）用于侦听数据的变化，而触发器（trigger）用于触发相应的操作。

5.在里面修改延迟1s的业务

代码解析：

调用clearTimeout(timer)来清除之前的延时器（如果存在）。这样可以确保在设置新的延时器之前，之前的延时器已经被取消。然后，使用setTimeout函数创建一个新的延时器，它会在1000毫秒（即1秒）后执行一个回调函数。

回调函数中的代码会将传入的value赋给initValue，即更新了数据。然后，通过trigger()方法通知Vue数据msg发生了变化，使其重新渲染相关的组件。

展示：

App.vue代码：

<template>
    <div class="app">
        <h2>{
   { msg }}</h2>
        <input type="text" v-model="msg">
    </div>
</template>
<script setup lang="ts" name="App">
    import {ref,customRef} from 'vue'
    // 使用Vue提供的默认ref定义响应式数据，数据一变，页面就更新
    //let msg = ref('你好')
    // 使用Vue提供的默认ref定义响应式数据，数据一变，页面就更新
    let initValue = '你好'
    let timer:number
    let msg = customRef((track,trigger)=>{
        return{
            // get何时调用? - msg被读取时
         get(){
            track();//告诉Vue数据msg很重要，你要对msg进行持续关注，一旦msg变化就去更新
            return initValue;
         },
          // set何时调用? - msg被修改时
         set(value){
            clearTimeout(timer)
            timer = setTimeout(()=>{
                initValue = value
                trigger(); //通知Vue一下数据msg变化了
            },1000);
         }
        }
    })
</script>
<style scoped>
    .app {
        background-color: #ddd;
        border-radius: 10px;
        box-shadow: 0 0 10px;
        padding: 10px;
    }
    button {
        margin:0 5px;
    }
</style>

但是这样写还是写不够方便简洁，以后有新的业务时要修改的地方太多

还可以更近一步的完善，如下：

1.封装一个hoolks，将逻辑代码写入进去。

代码解析：

方法会返回一个具有延迟更新功能的数据对象。你可以把它想象成一个计时器。

当你在组件中使用该方法时，你需要传递两个参数：初始值和延迟时间。初始值就是数据的初始内容，而延迟时间表示在用户输入后等待多长时间才进行更新。

在内部，这个函数使用了Vue提供的`customRef`函数，它可以帮助我们创建一个自定义的数据跟踪器。

这个数据跟踪器有两个方法：`get`和`set`。当其他部分代码读取数据时，就会调用`get`方法。然后，我们返回数据的当前值。

当其他部分代码修改数据时，就会调用`set`方法。在这个方法中，我们首先清除之前的计时器，以防止数据更新发生太频繁。然后，我们创建一个新的计时器，在延迟时间后执行一个回调函数。在回调函数中，我们将数据的值更新为新值，并通知Vue数据发生了变化。

最后，函数返回一个包含延迟更新的数据对象，你可以在组件中使用它。当你读取这个数据时，Vue会自动追踪它，并在数据发生变化时更新相关的组件。而当你修改这个数据时，它会等待一段时间后才进行更新操作，以避免过于频繁的更新。

2.在App.vue中使用该文件

useMsgRef.ts代码：

import { customRef } from "vue";
export default function(initValue:string,delay:number){
  // 使用Vue提供的customRef定义响应式数据
  let timer:number
  // track(跟踪)、trigger(触发)
  let msg = customRef((track,trigger)=>{
    return {
      // get何时调用？—— msg被读取时
      get(){
        track() //告诉Vue数据msg很重要，你要对msg进行持续关注，一旦msg变化就去更新
        return initValue
      },
      // set何时调用？—— msg被修改时
      set(value){
        clearTimeout(timer)
        timer = setTimeout(() => {
          initValue = value
          trigger() //通知Vue一下数据msg变化了
        }, delay);
      }
    }
  })
  return {msg}
}

App.vue代码：

<template>
    <div class="app">
        <h2>{
   { msg }}</h2>
        <input type="text" v-model="msg">
    </div>
</template>
<script setup lang="ts" name="App">
    import {ref} from 'vue'
    import useMsgRef from './useMsgRef'
    // 使用Vue提供的默认ref定义响应式数据，数据一变，页面就更新
    // let msg = ref('你好')
    // 使用useMsgRef来定义一个响应式数据且有延迟效果
    let {msg} = useMsgRef('你好',3000)
</script>
<style scoped>
    .app {
        background-color: #ddd;
        border-radius: 10px;
        box-shadow: 0 0 10px;
        padding: 10px;
    }
    button {
        margin:0 5px;
    }
</style>

总结：

本文介绍了一些Vue 3中的响应式API，包括shallowRef、shallowReactive、readonly、shallowReadonly、toRaw、markRaw和customRef。

• shallowRef和shallowReactive是用于创建响应式数据的函数。shallowRef创建一个浅层响应式引用，而shallowReactive创建一个浅层响应式对象。
• readonly和shallowReadonly用于创建只读的响应式数据。readonly创建一个深层只读响应式对象，而shallowReadonly创建的对象只有顶层属性是只读的。
• toRaw和markRaw用于处理响应式数据的原始值。toRaw用于获取响应式对象的原始值，而markRaw用于标记一个对象，使其在响应式转换时保持不可响应。
• customRef是一个自定义的响应式引用创建函数，允许开发者定义自己的跟踪器逻辑，实现更高级的响应式行为。