对于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 = null
  return 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 = 18
  console.log(dataRaw)
}
</script>

<template>

  <button @click="change">点我一下</button>
  <div>{{reactiveData}}</div>
  <div>{{name}}----{{age}}</div>
  <div>{{nameRef}}</div>
</template>

<style scoped>

</style>