ref函数与reactive函数

我们只知道在setup里面定义变量需要使用ref函数才能变成响应式，但是具体过程及使用方式却不太清楚，今天总结下。

ref

ref数据可以将非响应式数据转换为响应数据

创建数据

import {ref} from 'vue'
export default {
	setup() {
		let name = ref('fufu')
		let age = ref(20)
		let love = ref({
			fruits: ['watermelon', 'strawberry'],
			music: {
				domestic: 'I will miss you',
				foreign: 'yellow'
			}
		})
		return {
			name, age, love
		}
	}
}

渲染数据

<template>
  <div>
    <h3>个人信息h3>
    <ul>
      <li>姓名：{{name}}li>
      <li>年龄：{{age}}li>
      <li>爱好：
        <ul>
          水果：
          <li v-for="(item, index) in love.fruits" 
          :key="index">{{item}}li>
        ul>
        <ul>
          歌曲：
          <li>国外：{{love.music.domestic}}li>
          <li>国内：{{love.music.foreign}}li>
        ul>
      li>
    ul>
  div>
template>

展示效果

我们来简单改变下数据

function addAge() {
    age.value = age.value + 1
}

这个时候有人就有疑问了哦，为什么跟vue2的写法不同呢，.value又是什么呢，我们先将ref过的age值打印出来。

可以发现一个简单的字符串被封装成了一个对象（refImpl类的实例），在这个对象的原型上封装了我们需要的响应方法get，set，并将值挂到value属性上了。所以我们取值或设置值只能够使用.value。

为什么在template上不需要使用.value呢？

肯定有人会提出这样的疑问，其实在vue模板里面，底层是自动添加了.value的，不需要我们手动添加。

所有类型都会被转换为refImpl实例对象吗？
我们将love对象进行打印看看

reactive

我们发现love对象也变成了一个refImpl的实例对象，但是值却变成了一个Proxy的实例对象，这又是什么呢？想要了解proxy类，我们就要引出reactive函数了。

reactive只能将对象类型的数据转换为响应式
使用reactive方法封装love对象发现它直接将对象转换为了Proxy的实例对象，这样我们使用的时候就可以不在需要.value拿到值，而可以直接使用reactive函数的返回值。

经过比较可以发现reactive函数的返回值和ref函数返回值的value属性的值是一致的，也就是说当ref函数对对象进行响应式转换式也是去求助了reactive方法。

值得一提的是，reactive对数组的转换，在vue2时，使用下标进行数组改变是行不通的，但是reactive却是可以实现的。

对比

• ref可以转换任何类型的值，但是reactive只能转换对象类型的值。
• ref转换的值在使用时需要.value（templete是底层自动加了），而reactive方法转换的值可以直接使用。
• ref其实使用的是vue2的defindePropertype方法进行响应数据的转换，但是对象也是求助了reactive，而reactive使用的使用proxy方式进行响应转换的。

总结

在开发中，更推荐使用reactive，并且将所有数据放进一个对象里进行初始化响应转换，类似于vue2的data一样。