Vue3 中 reactive 和 ref 和 toRefs

 前期回顾     

Vue3 项目实战 —— 后台管理系统( pc端 ) —— 动态多级导航菜单顶部侧边联动_0.活在风浪里的博客-CSDN博客_vue多级导航Vue3项目实战 —— 后台管理系统( pc端 ) —— 动态多级导航菜单顶部侧边联动https://blog.csdn.net/m0_57904695/article/details/128740216?spm=1001.2014.3001.5501

前言： 

   
 reactive 是vue3的一个组合api vue3中新增的最核心的功能就是组合api

•  reactive vue3建议只用来声明对象 他声明的对象中的每一个属性都是响应式的，但是解构了或直接将reactive的值写在template上，就不具备响应式了
•  他是结合es6的proxy 结合递归给每一个reactive声明的对象数据添加上 setter/getter方法 从而实现数据的响应式
•  ref是用reactive封装成的一个方法 这个方法我们通常用来声明基本数据类型和数组数据
•  ref声明的数据是一个对象 值是value ref在template的时候不需要写value 但是js的时候必须写value

 toRefs可以解构reactive对象的属性，将属性解构出来依旧具备响应，转换成一个个ref对象,既然是ref对象肯定是需要.value的
  

 ref

<template>
	<div>
		<button @click="add">add--------------{{ number }}</button>
		<h3 @click="color = '#' + Math.round(Math.random() * 16777216).toString(16)">这是我点击要随机改变颜色的元素</h3>
	</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
let number = ref(123);
//可以在css中使用ref定义的相应数据 语法：v-bind(变量名)
const color = ref('red');
function add() {
	number.value++;
}
</script>
<style lang="scss" scoped>
h3 {
	color: v-bind(color);
}
</style>

toRefs的基本用法，以及原理

1.有的时候我们会使用到对象解构，这个时候如果用到reactive,是无法实现响应式效果的，例如以下

<template>
	<div>
		<button @click="btn">add---------{{ age }}</button>
	</div>
</template>

<script setup>
import { reactive } from 'vue';

const info = reactive({
	uname: '我只会心疼哥哥er！', //尽量不要用保留字name
	age: 18,
});
// 不使用toRefs直接解构，template中不会及时更新，但是在setup中可以更新
let { uname, age } = info;

const btn = () => {
	age++;
	uname = '我要一辈子对你好er~';
	console.log('age---', age);
	console.log('uname---', uname);
};
</script>

<style></style>

​

 

2：reactive的值直接写在template，也是不及时更新的 

<template>
	<div>
		<button @click="btn">add----------{{ age }}-------{{ info.age }}</button>
	</div>
</template>

<script setup>
import { reactive } from 'vue';

const info = reactive({
	uname: '小明打小红',
	age: 18,
});

//这样不使用toRefs也是失去响应式的
let age = info.age;
let uname = info.uname;

const btn = () => {
	age++;
	uname = '小明跪求小红原谅';
	console.log('age---', age);
	console.log('uname---', uname);
};
</script>

<style></style>

 

 3.这时候就得用到toRefs了，toRefs可以将reactive解构出来的变量转换成ref

<template>
	<div>
		<!-- 奇怪你会发现info.age竟然及时更新了，这是因为你使用toRefs,它们建立起了链接 -->
		<button @click="btn">add-----{{ age }}--------{{ info.age }}</button>
		<!-- 此时 age === info.age 全等 true-->
		<div>{{ age === info.age }}</div>
	</div>
</template>

<script setup>
import { reactive, toRefs } from 'vue';

const info = reactive({
	uname: '小明怒砸电视机~',
	age: 18,
});
let { age, uname } = toRefs(info);

const btn = () => {
	// toRefs解构出来的是ref对象，所以要加.value
	age.value++;
	uname.value = '一段姻缘就此结束了！o(╥﹏╥)o  er~';
	console.log('age---', age.value);
	console.log('uname---', uname.value);
	console.log('😂👨🏾‍❤️‍👨🏼==>：', age.value === info.age);
};
</script>

<style></style>

​

本章完