vue3--shallowReactive、shallowRef、readonly、shallawReadonly、toRaw、markRaw、customRef、provide、inject

最新推荐文章于 2023-12-27 11:46:50 发布

春风霓裳

最新推荐文章于 2023-12-27 11:46:50 发布

阅读量356

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43470725/article/details/126454757

版权

vue 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

vue3–所有api:https://vuejs.org/api/

**shallowRef*

*:只处理基本数据类型的响应式，不进行对象的响应式处理。

shallowReactive

：只处理对象最外属性的响应式（浅响应式）。
如果有一个对象数据，结构比较深，但变化时只是外层属性变化===>shallowReative.
如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ====>shallowRef

readonly

:让一个响应式数据变为只读的（深只读）

shallowReadonly

:让一个响应式数据变为只读的（浅只读）
应用场景：不希望数据被修改时。

**toRow*

*:将一个有reactive生成的响应式对象转为普通对象。
使用场景：用于读取响应式对象对应得普通对象，对这个普通对象的所有操作，不会引起也没更新。

**markRow

:
作用**：标记一个对象，使其永远不会在成为响应式对象。
应用场景：
1、有些值不应被设置为响应式的，列如复杂的第三方类库等。
2、当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

给一个响应对象上可以追加一个非响应式的数据给这个响应式对象上

**customRef

:自定义一个ref**
https://vuejs.org/api/reactivity-advanced.html#customref

防抖动案例：

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

<script>
import { ref,customRef } from "vue";
export default {
  name: "CustomRefDemo",
  setup(props, context) {
    
    // 自定义一个ref---名为：myRef
    function myRef(value,delay){
      let timer
      return customRef((track,trigger)=>{
        return{
          get(){
            console.log(`有人从myRef这个容器中读取数据了: ${value}`)
             track()//通知vue追踪数据的变化（提前和get商量一下，让他认为这个value是有用的）
            return value
           
          },
          set(newValue){
            console.log(`有人从myRef这个容器中修改数据了: ${newValue}`)
            clearTimeout(timer)
            timer = setTimeout(()=>{
              value = newValue
              trigger()//通知vue重新解析模板
            },delay)
            
          },
        }
      })
    }

    let keyWord = myRef('hello',500)//使用程序员自定义的ref
    return {
      keyWord
    };
  },
};
</script>