vue3 reactive ref unref isref toRefs customRef shallowRef triggerRef 的详解

vue3 reactive ref unref isref toRefs customRef shallowRef triggerRef 的详解

1.reactive

当（引用）数据 直接改变 不会让模版响应 更新渲染：通常我们用reactive去定义一些复杂类型数据以达到响应式的目的：Array,Object

<template>
    <button @click="giveParentHandVal">{{obj.name}}</button>
</template>
<script setup lang="ts">
//我们直接定义一个对象去修改这个值是做不到响应式的
const obj = {
     name:'Tom',
     age:20
}
const giveParentHandVal = () =>{
//当我们去修改这个值的时候页面没有反应
     obj.name = 'jrray'
   }
//这里需要用reactive去定义
const obj=reactive({
     name:'Tom',
     age:20
})
</script>

2.ref

给一个简单的数据类型绑定响应式：Number,boolean,string…

<template>
    <button @click="giveParentHandVal">{{name}}</button>
</template>
<script setup lang="ts">
//我们直接定义一个对象去修改这个值是做不到响应式的
const name = 'tom'
const giveParentHandVal = () =>{
//当我们去修改这个值的时候页面没有反应
     name = 'jrray'
   }
//这里需要用reactive去定义
const name =ref('tom')
</script>

3.unref

如果他的参数是一个响应式的参数返回的是一个value，负责的话返回的是其本身，unref()：是 val = isRef(val) ? val.value : val 的语法糖。

4.isref

判断一个值是不是响应式对象

5.toRefs

将一个响应式对象转换成一个普通对象，并且它里面的每一个值都是响应式的，通常我们解构的时候会用到

<template>
    <div >
      {{name}}{{age}}
    </div>
</template>
<script setup lang="ts">
 const obj = reactive({
    name:'2222',
    age:1123
  })
  //解构出来不丢失响应性
  const {name,age} = toRefs(obj)
</script>

6.customRef

创建一个自定义的ref
使用场景：当我们需要处理接口异步问题的时候会用到，我们需要等到接口的值返回的时候去给我们定义的变量赋值 之前2.0 是通过async和await处理的 但是在setup中只支持同步操作，所以这里我们就必须使用customRef去处理

<template>
    <div>
    {{status}}
    </div>
    <button @click="change">跳转</button>
</template>

<script setup lang="ts">
import { ref, customRef } from "vue";
// value:接收一个参数
function myRef(value) {
  // 返回一个回调函数,接收两个参数,分别是追中变化与触发更新
  return customRef((track, trigger) => {
    // 传入接口路径,返回一个promise
    axios(url)
      .then((res) => {
        return res.json(); //接口返回数据转换成json
      })
      .then((data) => {
        //拿到数据并赋值
        value = data;
        trigger(); //updated数据
      })
      .catch((err) => {
        console.log(err);
      });
    return {
      get() {
        track(); //数据是需要追踪变化
        return value;
      },
      // 更新时会接收一个新值
      set(newValue) {
        value = newValue; //更新值
        console.log("set", newValue);
        trigger(); //触发界面更新
      },
    };
  });
}
const status = myRef(1)

</script>

7.shallowRef

只处理基本数据类型的响应式, 不进行对象的响应式处理

const obj= shallowRef({      // obj将不在是一个响应式对象 
      num: 0
    });
    const name = shallowRef("tom")

8.shallowReactive

只处理对象最外层属性的响应式（浅响应式）。

const obj= shallowReactive  ({      // obj将不在是一个响应式对象 
      num: 0,// 只将第一层数据做了响应式处理
      name:'tom',
      childer:{
      id:'22'// 深层次的数据将会是一个普通的对象
      name:"121"
	}
    });
 

9.triggerRef

配合shallowRef一起使用；
可以使用triggerRef(xxx)强制使括号内属性进行同步（即触发一次响应）

<template>
    <div>
    {{message }}
    </div>
    <button @click="change">跳转</button>
</template>
import { triggerRef , shallowRef} from 'vue'
let message = shallowRef({
  name: 'tom'
})
const change= () => {
  message.value.name= 'tom'
  triggerRef(message)   // 强制触发响应
}