vue3组合式API（一）

1，ref

作用：一般用于定义基本数据类型数据，比如 String / Boolean / Number等
原理：ref 的背后是使用 reactive 来实现的响应式
语法：const x = ref(100)
访问：在 setup 中使用 .value 来访问

// Demo.vue

<template>
    <h1>ref的使用</h1>
    <h1 v-text="num"></h1>
    <button @click="num++">自增</button>
    <button @click="add">自增</button>
</template>


<script setup>
import {ref} from "vue"
// num叫一个ref变量，也叫ref对象
let num = ref(1000);
let add = ()=>{
    num.value++
}
</script>

<style lang="less" scoped>
</style>

#2，isRef

作用：判断一个变量是否为一个 ref 对象。
语法：const bol = isRef(x)

// Demo.vue

<template>
  <h1>isRef的使用</h1>
  <h1 v-text="num"></h1>
  <button @click="num++">自增</button>
  <button @click="add">自增</button>
</template>

<script setup>
import {ref,isRef} from "vue"
let num = ref(1000);
let add = ()=>{
    num.value++
}

// num就是一个ref变化
console.log(isRef(num)); // true
console.log(isRef(110)); // false
console.log(isRef(num.value)); // false

</script>

<style lang="less" scoped>
</style>

#3，unref

作用：用于返回一个值，如果访问的是 ref变量，就返回其 .value值；如果不是 ref变量，就直接返回。
语法：const x = unref(y)

// Demo.vue

<template>
  <h1>unref的使用</h1>
  <h1 v-text="num"></h1>
  <button @click="num++">自增</button>
  <button @click="add">自增</button>
</template>

<script setup>
import {ref,isRef,unref} from "vue"
let num = ref(1000);
let add = ()=>{
    num.value++
}

console.log(isRef(num));
// 如果给unref传递一个ref变量，得到这个ref的value值
console.log(unref(num));
// 如果给unref传递的不是一个ref变量，得到这个值的本身
console.log(unref(num.value));
console.log(unref(110));

</script>

<style lang="less" scoped>
</style>

#4，customRef

作用：自定义ref对象，把ref对象改写成get/set，进一步可以为它们添加 track/trigger。

// Demo.vue

<template>
  <h1>customRef的使用</h1>
  <input type="text" v-model="name" />
</template>

<script setup>
// import {ref,isRef,unref} from "vue"
// let name = ref("");

import { customRef,onRenderTracked,onRenderTriggered } from "vue"
let name = customRef((track,trigger)=>{
    let value = "";
    return {
        get(){
            track(); // 如果有人访问name，就执行track()
            return value
        },
        set(val){
            trigger(); // 如果有人修改name，就执行trigger
            value = val;
        }
    }
})
// 仅供在开发环境下，用于ref变量的调试
onRenderTracked((ev) => console.log("name被访问了", ev));
onRenderTriggered((ev) => console.log("name被修改了", ev));
</script>

<style lang="less" scoped>
</style>

#5，toRef

作用：把一个 reactive对象中的某个属性变成 ref 变量。
语法：const x = toRef(reactive(obj), 'key') // x.value

// Demo.vue

<template>
  <h1>toRef的使用</h1>
  <h1 v-text="user.name"></h1>
</template>

<script setup>
import {ref,isRef,unref,reactive,toRef} from "vue"
let user = reactive({name:"malu",age:18});
setTimeout(() => {
    user.name = "码路"
}, 1000);

// 能不能把user中的name变成ref变量呢？
// 答：toRef

console.log(user.name);
console.log(isRef(user.name));
console.log("-------");
let name = toRef(user,"name");
console.log(name.value);
console.log(isRef(name));

</script>

<style lang="less" scoped>
</style>

#6，toRefs

作用：把一个reactive响应式对象变成ref变量。
语法：const obj1 = toRefs(reactive(obj))
应用：在子组件中接收父组件传递过来的 props时，使用 toRefs把它变成响应式的。

// Demo.vue

<template>
  <h1>toRefs的使用</h1>
  <h2 v-text="name"></h2>
  <h2 v-text="age"></h2>
</template>

<script setup>
import {ref,isRef,unref,reactive,toRefs} from "vue"
let user = reactive({name:"malu",age:18});
let {name,age} = toRefs(user);
console.log(isRef(name));
console.log(isRef(age));
</script>

<style lang="less" scoped>
</style>