当前位置：首页 > article >正文

Vue3的Composition组合式API(readonly与shallowReadonly函数、toRaw与markRaw函数、customRef函数)

article 2024/10/27 9:55:19

1. readonly与shallowReadonly函数

readonly: 让一个响应式数据变为只读的(深只读)
shallowReadonly：让一个响应式数据变为只读的(浅只读)，可以修改第二层及更深的层数据
应用场景: 不希望数据被修改时。如别人提供的数据，我们只想使用，不想修改

使用示例：

<template>
  <h2>当前x的值是：{{x}}</h2>
  <button @click="x++">点我x++</button>

  <h2>姓名：{{person.name}}</h2>
  <h2>薪资：{{person.job.salary}}K</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.job.salary++">涨薪</button>
</template>

<script>
import {ref,reactive,readonly,shallowReadonly} from 'vue'
export default {
  name: 'Student',
  setup(){
    let x = ref(0)

    let person = reactive({
      name:'张三',
      job:{
        salary:20
      }
    })

    x = readonly(x)
    person = shallowReadonly(person)

    return {
      x,
      person
    }
  }
}
</script>

效果如下：

点我x++，页面没反应
点击修改姓名，页面没反应
点击涨薪，页面上的薪资能正常变化

3. toRaw与markRaw函数

toRaw：

作用：将一个由reactive生成的响应式对象转为普通对象
注意：对这个普通对象的所有操作，会引起响应式对象的数据发生变化，但不会引起页面更新。等下一次页面被重新渲染时，发生改变的数据会更新到页面

markRaw：

作用：给一个响应式对象，添加一个对象类型的属性A。标记属性A，使其永远不会再成为响应式对象
注意：对属性A的所有操作，会引起属性A的数据发生变化，但不会引起页面更新。等下一次页面被重新渲染时，属性A发生改变的数据会更新到页面
应用场景:
1. 有些值不应被设置为响应式的，例如引用的复杂的第三方类库等
2. 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能

使用示例：
Student.vue

<template>
  <h2>人员全部信息: {{person}}</h2>
  <h2>姓名：{{person.name}}</h2>
  <button @click="person.name+='~'">修改姓名</button>

  <br>
  <button @click="getAndChangeRawPerson">先获取再改变最原始的person信息</button>
  <br>
  <button @click="addRawCar">给人添加一台最原始的车</button>
  <br>
  <button v-show="person.car" @click="changeCarPrice">改变车的价格</button>
</template>

<script>
import {reactive,toRaw,markRaw} from 'vue'
export default {
  name: 'Student',
  setup(){

    let person = reactive({
      name:'张三'
    })

    function getAndChangeRawPerson(){
      const rawPerson = toRaw(person)
      // 会引起person的数据变化，但页面不会刷新。页面会在下次渲染时更新改变的数据
      rawPerson.name+='$'
    }

    function addRawCar(){
      let car = {name:'大众',price:10}
      // 如果没有markRaw。person.car = car添加的是一个响应式数据。因为person是响应式的
      person.car = markRaw(car)
    }

    function changeCarPrice() {
      // 会引起person的数据变化，但页面不会刷新。页面会在下次渲染时更新改变的数据
      person.car.price = 99
    }

    return {
      person,
      getAndChangeRawPerson,
      addRawCar,
      changeCarPrice
    }
  }
}
</script>

效果如下：

点击先获取再改变最原始的person信息，页面没有发生变化，但其实person的数据已经改变了
再点击修改姓名，页面重新渲染，会将之前对toRaw数据的改变也更新到页面
点击给人添加一台最原始的车，页面能正常更新person。同时也会出现改变车的价格按钮
点击改变车的价格，页面没有发生变化，但其实person.car的数据已经改变了
再点击修改姓名，页面重新渲染，会将之前对markRaw的person.car的数据的改变也更新到页面

4. customRef函数

作用：创建一个自定义的ref，并对其读取track跟踪和更新trigger触发进行显式控制。
案例：实现防抖效果。如下所示：

App.vue

自定义一个ref。value就是ref管理的数据；delay是其它参数
读取value的值，会自动调用get。需要使用track()，通知Vue追踪value的变化，这样才会加载value更新后的数据
当修改value的值，会自动调用set，变传入需要修改的值。需要使用trigger()，通知Vue去重新解析模板
set中创建了一个定时器。延迟一段时间，再去修改数据
使用let keyWord = myRef('hello',500)定义了一个响应式的数据keyWord，初始的数据是hello，每次修改keyword都会延迟500ms

<template>
  <input type="text" v-model="keyWord">
  <h3>{{keyWord}}</h3>
</template>

<script>
import {customRef} from 'vue'
export default {
  name: 'App',
  setup() {
    // 自定义一个ref。value就是ref管理的数据；delay是其它参数
    function myRef(value, delay){
      let timer
      return customRef((track,trigger)=>{
        return {
          // 读取value的值，会自动调用get
          get(){
            console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`)
            track() // 通知Vue追踪value的变化，这样才会加载value更新后的数据
            return value
          },
          // 当修改value的值，会自动调用set，变传入需要修改的值
          set(newValue){
            console.log(`有人把myRef这个容器中数据改为了：${newValue}`)
            clearTimeout(timer)   // 如果有定时器未执行，则先清除旧的定时器，防止抖动
            timer = setTimeout(()=>{    // 延迟一段时间，再去修改数据
              value = newValue
              trigger() // 通知Vue去重新解析模板
            },delay)
          }
        }
      })
    }

    // 使用程自定义的ref
    let keyWord = myRef('hello',500)

    return {keyWord}
  }
}
</script>

效果如下：在输入框的hello后面，快速的输入123，过一段时间，下面的hello也更新为hello123
customRef函数