Vue学习记录之三（ref全家桶）

ref、reactive是在 setup() 声明组件内部状态用的，这些变量通常都要 return 出去，除了供 < template > 或渲染函数渲染视图，也可以作为 props 或 emit 参数在组件间传递。它们的值变更可触发页面渲染。

ref ：是一个函数，用于创建一个响应式的引用，通俗的说就是把一个变量转变成响应式变量。定义基本类型数据（支持所有的类型）.能指定基础类型和复杂类型. 也可以读取dom（详见实例1）

isRef: 是判断一个对象是否是Ref 类型。

Ref ：是 TypeScript 中的类型，用于描述由 ref 创建的响应式对象的类型。

import type {Ref} from 'vue'

const count: Ref = ref(0);

reacive ：和ref功能相同，但是使用范围不同。只能指定基础类型（引用类型）, 定义对象（或数组）类型(引用类型) Array,Object,Map,Set。其次ref 取值或者修改值需要用到value, 而reactive则不需要。reacive 不能直接赋值，否则就会破坏其响应式， readonly可以将其属性转化为只读。其次shallowReactive也是浅层响应。详见实例4

shallowRef : 用于浅层响应式的。ref 可以做深层次相应的。但是在同一个方法中，二者不可以同时使用，否则shallowRef 就会失去浅层相应。二者的底层都是triggerRef,所有被强制执行了。

triggerRef: 强制更新页面DOM，一般情况下不直接使用。

customRef ：顾名思义，就是可以自定义ref函数。接受一个工厂函数作为参数，这个工厂函数返回一个对象，该对象需要实现 get 和 set 方法。一般情况下用不到，属于高级编程。详见实例2

toRefs: 使从reactive定义的解构数据变成响应式的。用于将整个 reactive 对象中的每个属性转换为 ref，适合解构赋值的场景。

toRef：用于将 reactive 对象中的单个属性转换为 ref，适合只处理某个特定属性的场景。是对传入对象指定属性的响应式绑定，值改变不会更新视图。只能修改响应式对象的值，非响应式视图毫无变化。该函数需要两个参数，第一个是对象，第二个是对象的属性。

它们的主要区别在于作用的范围：toRefs 处理所有属性，而 toRef 仅处理单个属性。

toRaw : 用于获取响应式对象的原始数据对象，不受响应式系统的影响。就是解除响应式。

左侧是： man对象，右侧是 toRaw(man)

我们可以自己编写一下toRefs的功能：

ts 复制代码

const man = reactive({name:'lvmanba', age:50, like: 'eat'})
const toRefs = <T extends object>(object:T) =>{
    const map:any = {}
    for(let key in object){
      map[key] = toRef(object,key)
    }
    return map
}

const {name,age,like} = toRefs(man)

toRef、toRefs 用于处理组件/函数传递的响应式数据，如：在接收父组件 props 时 / 或 composables 组合式函数返回数据时建立起某些属性的响应式引用；

通过 ref 包装的属性在 setup 函数内都需要通过 .value 去访问它值 ( template 模版内不用 )。因此，ref、toRef 创建的变量值都需要用变量 .value 读取。reactive 则不用，因为会自动解包分配给它的 ref。

至于 toRefs，如果是解构赋值，如： const { state1, state2 } = toRefs(props)，值需要这样获取：state1.value.count；

若整体赋给一个变量，如：const state = toRefs(props)，则是 state.state1.value。

只有 toRefs 可以解构；

实例1

ts 复制代码

<template>
  <div>{{Man}}</div>
  <div>{{Man2}}</div>
  <button @click="change">修改</button>
</template>
<script setup lang='ts'>
import { ref,reactive, shallowRef,triggerRef, customRef } from 'vue'
import type {Ref} from 'vue'
//const Man = {name: "lvmanba"}  //下面将无法修改
type M = {
  name: string
}
//可以使用两种方式，第一种（Ref）如果类型比较复杂，则推荐使用。一般使用第二种。
//第一种：
//const Man:Ref<M> = ref({name:"lvmanba"})
//第二种：
//const Man = ref<M>({name:"lvmanba"})   //ref<泛型类型>({对象})
//第三种：
const Man = ref({name:"lvmanba1"})   //让自己判断类型
const Man2 = shallowRef({name:"lvmanba2"})  //应该是浅层相应，只能到value。
const change = () =>{
  // ref 返回的是ES6的class类，通过它里面的属性value来获取值。 固定语法
  //Man.value.name = "lvmanba1-1"
  //Man2.value.name = "lvmanba2-1"
  //注意，如果同时在一个方法中修改ref和shallowRef两种类型，则shallowRef失效。 修改shallowRef类型的值有两种方法。
  //方法1：
  Man2.value.name = "lvmanba2-1"
  triggerRef(Man2)
  //方法2：
  /*
  Man2.value = {
    name:"我被修改了"
  }
  */
  console.log(Man)
}
</script>
<style scoped>

</style>

实例2：自定义ref

ts 复制代码

<template>
  <div>{{Man}}</div>
  <button @click="change">修改</button>
</template>
<script setup lang='ts'>
import { ref,reactive, shallowRef,triggerRef, customRef} from 'vue'
function MyRef<T>(value:T){
  //它是一个回调函数，要求返回一个对象,需要传递2个参数track,trigger
  return customRef((track,trigger)=>{
    return {
      get(){
        //用来收集依赖
        track()
        return value
      },
      set(newVal){
        //触发依赖
        value = newVal
        trigger()
      }
    }
  })
}
const Man = MyRef<string>("你好")
const change = () =>{
  Man.value = "不好"
}
</script>

上述可以实现防抖功能：函数改进如下

ts 复制代码

function MyRef<T>(value:T){
  //它是一个回调函数，要求返回一个对象,需要传递2个参数track,trigger
  return customRef((track,trigger)=>{
    let timer: any
    return {
      get(){
        //用来收集依赖
        track()
        return value
      },
      set(newVal){
        //触发依赖
        clearTimeout(timer)
        timer = setTimeout(()=>{
          console.log("我被触发了")
          timer = null
          value = newVal
          trigger()
        },500)
        
      }
    }
  })
}

实例3: ref 读取dom

ts 复制代码

<template>
  <div>{{ name }}</div>
  <div class="container" ref="doms"> 这个是内容的主题</div>
  <button @click="changes">修改值</button>
</template>
<script setup lang='ts'>
import { ref,reactive, shallowRef,triggerRef, customRef} from 'vue'
const name = ref("lvmanba")
const doms = ref<HTMLDivElement>()
//console.log(doms.value?.innerHTML)  //这个阶段，html还没有被渲染，我们可以随便加入一个函数
const changes = () =>{
  name.value = "lvmanba2"
  console.log(doms.value?.innerHTML)
}
</script>

实例4 : reactive 实际应用

ts 复制代码

<template>
  <form>
    <input v-model="form.name" type="text">
    <br>
    <input v-model="form.age" type="text">
    <br>
    <button @click.prevent="submit">提交</button> <!--.prevent 阻止默认提交-->
  </form>
  <hr>
  <button @click="add">添加数组</button>
  <div>
    <li v-for="item in list">{{ item }}</li>
  </div>
  
</template>
<script setup lang='ts'>
import { ref,reactive, shallowRef,triggerRef, customRef} from 'vue'
//第一种 对象
const form = reactive({
  name: "张三",
  age: 20
})
const submit=()=>{
  console.log(form)
}
//第二种是 数组
let list = reactive<string[]>(['a','b','c'])
const add = () =>{
  //第一种方法，同步
  //list.push("ABC")
  //第二种方法，异步
  setTimeout(()=>{
    let res = ['ABC','EFG','HIG','KLM']
    //list = res   //reacive 不能直接赋值，否则就会破坏其响应式
    list.push(...res)  //... 是扩展运算符，用于将数组或其他可迭代对象展开成单个元素,并作为独立的参数传递给 push，最终将这些元素添加到 list 的末尾
    console.log(list)
  },2000)
}
//第三种方法，将数组转化为对象(添加一个对象，将数组作为属性), 然后就可以将 list_1.arr = res 赋值了。视图中也需要修改为list_1.arr
const list_1 = reactive<{arr:string[]}>({arr:[]})
</script>

Visual Studio Code小技巧, 输入vue3回车自动会出现下面的模版。

打开文件以后，输入下面内容。

js 复制代码

{
	"Print to console": {
	 	"prefix": "vue3",
	 	"body": [
	 		"<template>",
			"    <div></div>",
			"</template>",
			"<script setup lang='ts'>",
			"import { ref,reactive } from 'vue'",
			"",
			"</script>",

			"<style scoped>",
			"",
			"</style>",
	 	],
	 	"description": "Log output to console"
	}
}