对于vue3ref和reactive的学习笔记

1. 对于ref的学习

ref

接受一个内部值并返回一个响应式且可变的 ref 对象。通过这个对象的value属性去操作数据

案例：

<script setup lang="ts">
import { ref } from 'vue'
const message = ref("数据")
function change():void {message.value = "改变了一次"
}
</script><template><button @click="change">点我一下</button><div>{{message}}</div></template><style scoped></style>

isRef

用来判断一个对象是否为ref对象

案例：从vue引入isRef再通过isRef进行判断即可

`shallowRef`

是一个浅层次的响应式，也就是它只能检测到vuale的变化，不能检测到value下的属性的变化

注意，不可以和ref对象的值写在一起，否则也会触发更新

案例：

<script setup lang="ts">
import { ref,isRef,shallowRef,Ref } from 'vue'
const message:Ref<string> = ref("数据")
const shallowMes:Ref<object> = shallowRef({name:"jjs"})
function change():void {message.value = "改变了一次"console.log(isRef(message))
}
setTimeout(()=> {shallowMes.value.name = "1231"
},1000)
</script><template><button @click="change">点我一下</button>
<!--  <div>{{message}}</div>--><div>{{shallowMes}}</div>
</template><style scoped></style>

triggerRef

强制更新页面dom，也就是手动刷新视图，ref对象会自动帮我们去调这个api

<script setup lang="ts">
import { shallowRef,Ref,triggerRef } from 'vue'
const shallowMes:Ref<object> = shallowRef({name:"jjs"})
function change():void {}
setTimeout(()=> {shallowMes.value.name = "1231"triggerRef(shallowMes)
},1000)
</script><template><button @click="change">点我一下</button><div>{{shallowMes}}</div>
</template><style scoped></style>

customRef

customRef 是个工厂函数要求我们返回一个对象并且实现 get 和 set 适合去做防抖之类的

我们可以自定义ref

<script setup lang="ts">
import { Ref,customRef } from 'vue'
function myRef<T> (value:T):Ref {let time:any = nullreturn customRef((track, trigger)=> {return {get() {// 收集依赖track()return value},set(newVal) {clearTimeout(time)time = setTimeout(()=> {console.log("修改")// 触发更新trigger()value = newVal},500)}}})
}
let customData = myRef<string>("我是自定义的")function change():void {customData.value = "我变化了"
}
</script><template><button @click="change">点我一下</button><div>{{customData}}</div>
</template><style scoped></style>

2. 对于reactive的学习

用来绑定复杂的数据类型例如对象数组

不能够绑定基本数据类型

基本用法示例：

使用reactive无需.value只用.属性即可

<script setup lang="ts">
import { reactive } from 'vue'
const reactiveData = reactive({name: 'jjs'})function change():void {reactiveData.name = 'jtt'
}
</script><template><button @click="change">点我一下</button><div>{{reactiveData}}</div></template><style scoped></style>

readonly

拷贝一份对象为仅读，但是原reactive的修改也会引起他的变化

案例

<script setup lang="ts">
import { reactive,readonly } from 'vue'
const reactiveData = reactive({name: 'jjs'})
const reactiveCopy = readonly(reactiveData)
function change():void {reactiveData.name = 'jtt'console.log(reactiveCopy.name)
}
</script><template><button @click="change">点我一下</button><div>{{reactiveData}}</div></template><style scoped></style>

shallowReactive

也是只能对浅层次的数据做一个响应式，只能相应到obj.xxx如果xxx属性是一个对象的话，就没有响应式了，但是它也和shallowRef一样，如果reactive一起使用的话，也会收到reactive的影响导致视图进行更新，更新的为最新数据

toRef

将reactive的一个属性转换成ref类型，如果原始对象是非响应式的就不会更新视图数据是会变的

如果原始对象是响应式的是会更新视图并且改变数据的

toRefs

可以帮我们批量创建ref对象主要是方便我们解构使用

结构如： let {name,age} = {...obj}

toRaw

将响应式对象转化为普通对象

案例：

<script setup lang="ts">
import { reactive,toRef,toRefs,toRaw } from 'vue'
const reactiveData = reactive({name: 'jjs',age: 13})
let {name,age} = toRefs(reactiveData)
const nameRef = toRef(reactiveData,'name')
const dataRaw = toRaw(reactiveData)
function change():void {name.value = 'jtt'age.value = 18console.log(dataRaw)
}
</script><template><button @click="change">点我一下</button><div>{{reactiveData}}</div><div>{{name}}----{{age}}</div><div>{{nameRef}}</div>
</template><style scoped></style>