vue3 中 ref、reactive、toRef 和 toRefs 的区别

ref_定义任意类型响应式数据

1、ref 能定义“任何类型”的响应式数据（ref 在 vue3 中指响应式数据）；
2、参数可以传入任意数据类型；
3、使用 ref 定义的属性必须通过 .value 的形式才能修改其值。属性的值一旦被修改就会触发模板的重新渲染；
4、对于在 setup 返回的 refs（return 出的对象里的属性），因为在模板中访问它们时，它们会被自动浅解包，所以在 template 中使用时直接使用属性。

<div class="nav-box">
	<div class="nav-li" v-for="(item,index) in list" :key="index" :class="activeIndex == index?'nav-active':''">
        <div>{{item.name}}</div>
        <img class="nav-img" :src="item.img">
    </div>
	<div>{{state.count}}</div>
</div>
<script>
	import { ref } from 'vue'
	export default {
		setup() {
			const list = ref([
				{name:'博客',img:"/category/vlog.jpg"},
				{name:'生活',img:"/category/life.jpg"},
				{name:'学习',img:"/category/study.jpg"},
				{name:'旅行',img:"/category/travel.jpg"},
				{name:'思考',img:"/category/thinking.jpg"},
			])
            const state = ref({
                count: 0
            })
            console.log(list.value)
			console.log(state.value.count)
			return {list,state}
		}
	}
</script>

reactive_定义响应式 “对象”

1、用来定义“对象类型”的响应式数据——注意：是对象而非数组，数组请使用 ref 来定义；
2、参数只能传入对象类型，返回一个具有响应式状态的副本；
3、使用 reactive 定义的属性可以直接使用，不需要加 .value；
4、用 toRefs 可以保证解构后的 “reactive 对象” 不丢失响应式；否则，直接解构 reactive 对象会造成该对象脱离响应式。

<script>
	import { reactive,toRefs } from 'vue'
	export default {
		setup() {
			let obj = reactive({
				menubtn: false, // 移动菜单按钮
				navClass: "mbNavClose",
			})
			return {...toRefs(obj)}
		}
	}
</script>

toRef_将一个 reactive 转化为一个 ref

1、toRef 能够将 reactive 定义的对象的某个属性，转为一个 ref，且保持响应式两者的引用关系。
2、接收两个参数：源响应式对象 和 属性名，返回一个 ref 数据。
3、获取数据值的时候需要加 .value。
4、使用 toRef 转化后生成的 ref 数据如果是引用类型数据时，那么它不是原始数据的拷贝，而是原始数据的引用，改变它的数据也会同时改变原始数据。

<template>
  <div>{{ title }}</div>
</template>
<script>
  import { defineComponent, toRef } from 'vue'
  export default defineComponent({
    props: [title],
    setup (props) {
      const myTitle = toRef(props, 'title')
      console.log(title.value)
      return { title }
    }
  })
</script>

toRefs_将多个 reactive 自动解构为多个 ref

1、toRefs 用于将响应式对象转换为普通对象，其中普通对象的每个属性都是指向原始对象相应属性的 ref，两者保持引用关系；
2、toRefs 常用于 ES6 的解构赋值操作。但是，对一个响应式对象直接解构时，解构后的数据将不再有响应式，而使用 toRefs 可以方便解决这个问题；
3、获取数据值的时候需要加 .value；
4、使用 toRefs 转化后生成的 ref 数据如果是引用类型数据时，那么它不是原始数据的拷贝，而是原始数据的引用，改变它的数据也会同时改变原始数据；
5、作用和 toRef 类似，只不过 toRef 是对一个个属性手动赋值，而 toRefs 是自动解构赋值。

<div>
    <div @click="navmenuswitch" :class="menubtn?'mb-menu-open':'mb-menu-close'">{{menubtn}}</div>
    <div>{{navClass}}</div>
</div>
<script>
	import { reactive,toRefs } from 'vue'
	export default {
		setup() {
			let obj = reactive({
				menubtn: false, 
				navClass: "navClose",
			})
            const navmenuswitch = (e)=>{
				obj.menubtn = !obj.menubtn;
				if(obj.menubtn){
					obj.navClass = "navOpen";
				}else{
					obj.navClass = "navClose";
				}
			}
			return {...toRefs(obj),navmenuswitch}
		}
	}
</script>