内容摘要：setup 是用来写组合式 api ，内部的数据和方法需要通过 return 之后，模板才能使用。在之前 vue2 中，data 返回的数据，可以直接进行双向绑定使用，如果我们把 setup 中数据类

setup 是学习笔现响用来写组合式 api ，内部的何实数据和方法需要通过 return 之后，模板才能使用。应式在之前 vue2 中，学习笔现响data 返回的何实数据，可以直接进行双向绑定使用，应式如果我们把 setup 中数据类型直接双向绑定，学习笔现响发现变量并不能实时响应。何实接下来就看看setup如何实现data的应式响应式功能?

一、ref

setup 内的学习笔现响自定义属性不具备响应式能力，所以引入了 ref ，何实ref 底层通过代理，应式把属性包装值包装成一个 proxy ，学习笔现响proxy 内部是何实一个对象，使得基础类型的应式数据具备响应式能力，使用之前必须引入。

示例1：ref 使用

<template>  <div>   <input type="text" v-model="mood">   { { mood}}  </div> </template> <script> import {  ref } from "vue" export default{   setup(){    let mood = ref("此时心情好差呀！")   setTimeout(()=>{     mood.value = "心情要变的像人一样美"   },3000)   return{     mood   }  } } </script> 

此时可以在 setup 模板内任意编辑 mood，可以保证实时响应。实例在修改 mood 的值加了 value ，是因为 ref 的工作原来：

let mood = ref("此时心情好差呀!")

修改成 ：let mood = proxy({ value:"此时心情好差呀!"})

二、reactive

上述的 ref 让基础数据类型具备了响应式，服务器租用但是如果我们换成引用类型的数据，就会失效。所以引入了 reactive。

reactive 通过底层包装，将引用类型数据包装到 proxy 内，使用原理如：

let me = reactive({   single:true,  want:"暖的像火炉的暖男" }) // 运行结果为 let me = proxy : {  single: true, want:"暖的像火炉的暖男" } 

 引用的时候，直接使用 me.want 就可以了。

示例2：reactive 使用

<template>  <div>   { { me.want}}  </div> </template> <script> import {  ref , reactive } from "vue" export default{   setup(){    let me = reactive({     single:true,    want:"暖的像火炉的暖男"   })   setTimeout(()=>{     me.want = "夏天容易化了"   },3000)   return{     me   }  } } </script> 

通过 setup + ref + reactive 就可以完全实现 vue2 中 data 的响应式功能，所以 setup 完全可以替换掉 data。

三、toRefs 、toRef 应用

setup + ref + reactive 实现了数据响应式，不能使用 ES6 解构，会消除响应特性。所以需要 toRefs 解构，使用时，需要先引入。

它的工作原理为：

import {  ref , reactive, toRefs } from "vue" let me = reactive({   single:true,  want:"暖的像火炉的暖男" }) //运行为 let me = proxy : {  single: true, want:"暖的像火炉的暖男" } const {  single, want } = toRefs( me ) // 运行为 single : proxy({  value:true }) want : proxy({  value:"暖的网站模板像火炉的暖男" }) 

 toRefs 把 single 和 want 解构成两个 proxy ，所以是响应式的。

示例3：toRefs 解构数据

<template>  <div>   { { want}}   <input type="text" v-model="want">  </div> </template> <script> import {  ref , reactive, toRefs } from "vue" export default{   setup(){    let me = reactive({     single:true,    want:"暖的像火炉的暖男"   })   setTimeout(()=>{     me.want = "夏天容易化了"   },3000)   // 解构   const { single,want} = toRefs(me)    return{      single,     want    }   } } </script> 

toRef作用：将对象某一个属性，作为引用返回。比较难理解，可以打印查看下结果更容易理解。

let me = reactive({   single:true,  want:"暖的像火炉的暖男" }) let lv = toRef( me, love ) console.log(love,love); //打印结果 ObjectRefImpl {   __v_isRef: true  _key: "love"  _object: Proxy { single: true, want: "暖的像火炉的暖男"}  value: undefined  [[Prototype]]: Object }  

toRef 是组件之间进行传值值，对可选参数进行处理，运行时，先查看 me中是否存在 love ，如果存在时就继承 me 中的 love ，如果不存在时就创建一个 love ，然后解构赋值给变量 lv。

示例4：toRef 使用

<template>  <div>   { { want}}  <input type="text" v-model="want"> </div> </template> <script> import {  ref , reactive, toRefs, toRef } from "vue" export default{   setup(){    let me = reactive({     single:true,    want:"暖的像火炉的暖男"   })  setTimeout(()=>{    me.want = "夏天容易化了"  },3000)  const { single,want } = toRefs(me)  const love = toRef(me,love)  console.log(love,love);  return{    single,   want   }  } } </script> 

四、总结

ref 让基础数据类型具备响应式，而 reactive 让引用类型的数据具备响应式。setup + ref + reactive 完全实现 vue2 中 data 响应式功能。

toRefs 解构 reactive 包装的云服务器提供商数据，toRef 用于对可选参数。