Vue3响应式 ref全家桶

<template><div>{{ man.name }}<hr><button @click="change">修改</button></div>
</template>
<script setup lang="ts">
const man = {name:"cc"}
const change = () =>{man.name = "大cc"
}
</script>
<style scoped></style>

这样的change函数并不能实现修改值

要实现响应式就要利用 ref

ref()

ref接受一个内部值并返回一个响应式且可变的ref对象

ref对象仅仅有一个 .value 属性，指向该内部值

修改值的时候，ref返回的是ES6的class类

通过.value修改

import { ref, isRef, shallowRef, triggerRef, customRef } from 'vue'
<template><div>{{ man.name }}<hr><button @click="change">修改</button></div>
</template>
<script setup lang="ts">
const man = ref({name:"cc"})
const change = () =>{man.value.name = "大cc"
}
</script>
<style scoped></style>

这样就可以实现数据的响应式

泛型控制ref

// 自定义ref类型
type M = {name:string
}
const man = ref<M>({ name: "CC" })

 使用Vue内置的接口类型 Ref

import { Ref } from 'vue'const man = ref<Ref>({ name: "小满" })

 isRef()

isRef() 顾名思义就是判断是否是ref的

import { ref, isRef, shallowRef, triggerRef, customRef } from 'vue'
<template><div>{{ man.name }}<hr><button @click="change">修改</button></div>
</template>
<script setup lang="ts">
const man = ref({name:"cc"})
const change = () =>{man.value.name = "大cc"console.log(isRef(man))  // true
}
</script>
<style scoped></style>

shallowRef与 ref的区别

ref是深层次的，会找到最底层的值去修改

而shallowRef只会找到第一层，也就是 

man.value   这一层

 注意：shallowRef是不能和ref在一起写的，ref会影响shallowRef引起视图更新

triggerRef()

triggerRef会强制更新我们收集的依赖，shallowRef会根据triggerRef作强制的更新，就是因为ref底层调用了triggerRef,会影响shallowRef。

customRef

function myRef<T>(value: T) {let timer: anyreturn customRef((track, trigger) => {// 触发依赖和收集依赖手动实现return {get() {track()return value},set(newValue) {// console.log("触发了");// // 这时候会不停的发送请求// // 试着使用防抖clearTimeout(timer)timer = setTimeout(() => {console.log("触发了");value = newValuetimer = nulltrigger()}, 1000);}}})  // customRef是一个回调函数要求return一个对象,对象里面去实习get和set两个方法// track收集依赖// trigger
}

ref操作DOM

<template><div ref="dom">我是dom元素</div>
</template>
<script setup lang='ts'>import {  ref  } from 'vue'const dom = ref<HTMLDivElement>()console.log(dom.value?.innerHTML) // 我是dom元素
</script>