为什么推荐使用ref而不是reactive

reactive本身具有很大局限性导致使用过程需要额外注意,如果忽视这些问题将对开发造成不小的麻烦;ref更像是vue2时代option api的data的替代,可以存放任何数据类型,而reactive声明的数据类型只能是对象;

先抛出结论,再详细说原因:非必要不用reactive! (官方文档也有对应的推荐)

官方原文:建议使用 ref() 作为声明响应式状态的主要 API。

最懂Vue的人都这么说了:推荐ref!!!!!!

reactive和 ref 对比

• 
  
• ref 用于将基本类型的数据（如字符串、数字，布尔值等）和引用数据类型(对象) 转换为响应式数据。使用 ref 定义的数据可以通过 .value 属性访问和修改。
  
• reactive 用于将对象转换为响应式数据，包括复杂的嵌套对象和数组。使用 reactive 定义的数据可以直接访问和修改属性。
  

原因1:reactive有限的值类型

reactive只能声明引用数据类型(对象)

let  obj = reactive({

   name: '小明',

   age : 18

})

ref既能声明基本数据类型,也能声明对象和数组;

Vue 提供了一个 ref() 方法来允许我们创建可以使用任何值类型的响应式 ref

//对象
const state = ref({})
//数组
const state2 = ref([])

原因2:reactive使用不当会失去响应:

reactive一时爽,使用不恰当的时候失去响应泪两行,开开心心敲代码过程中,会感叹!!咦?怎么不行?为什么这么赋值失去响应了? 辣鸡reactive!!! 我要用 ref 👉👉yyds

1. 给reactive赋一整个普通对象/reactive对象

通常在页面数据回显时,需要将AJAX请求获取的对象直接赋值给响应式对象,如果操作不当就导致reactive声明的对象失去响应

• 
  
• 
  

  赋值一个普通对象

  
  

  let state = reactive({ count: 0 })
  //这个赋值将导致state失去响应
  
  state = {count: 1}
  

  
  
  
• 
  

  赋值一个reactive对象

  
  

  
  

  如果给reactive的响应式对象赋值普通对象会失去响应,那么给它赋值一个reactive的响应式对象不就行了吗?下面试试看

  
  

  
  
  

<template>

  {{state}}
</template>    

​
<stcirpt setup>

const state = reactive({ count: 0 })

 //nextTick异步方法中修改state的值

nextTick(() => {

  //并不会触发修改DOM  ,说明失去响应了

  state = reactive({ count: 11 });

});
</stcirpt>

在nexTick中给state赋值一个reactive的响应式对象,但是DOM并没有更新!

解决方法:

0. 
   
1. 
   

   不要直接整个对象替换,对象属性一个个赋值

   
   

   let state = reactive({ count: 0 })
   //state={count:1}
   
   state.conut = 1 
   

   
   
   
2. 
   

   使用Object.assign

   
   

   let state = reactive({ count: 0 })
   // state =  {count:1}   state失去响应
   
   state = Object.assign(state , {count:1})
   

   
   
   
3. 
   

   使用ref定义对象

   
   

   
   

   非必要不用reactive

   
   

   
   

   let state = ref({ count: 0 })
   
   state.value={count:1}
   

   
   
   

为什么同样是赋值对象ref不会失去响应而reactive会?

ref 定义的数据（包括对象）时，返回的对象是一个包装过的简单值，而不是原始值的引用;

就和对象深拷贝一样,是将对象属性值的赋值

reactive定义数据（必须是对象），reactive返回的对象是对原始对象的引用，而不是简单值的包装。

类似对象的浅拷贝,是保存对象的栈地址,无论值怎么变还是指向原来的对象的堆地址;

reactive就算赋值一个新的对象,reactive还是指向原来对象堆地址

2.将reactive对象的属性-赋值给变量(断开连接/深拷贝)

这种类似深拷贝不共享同一内存地址了,只是字面量的赋值;对该变量赋值也不会影响原来对象的属性值

let state = reactive({ count: 0 })
//赋值
// n 是一个局部变量，同 state.count
// 失去响应性连接
let n = state.count
// 不影响原始的 state

n++
console.log(state.count) //0

有人就说了,既然赋值对象的属性,那我赋值一整个对象不就是浅拷贝了吗?那不就是上面说的给响应式对象的字面量赋一整个普通对象/reactive对象这种情况吗?这种是会失去响应的

3.直接reactive对象解构时

• 
  
• 直接解构会失去响应
  

let state = reactive({ count: 0 })
//普通解构count 和 state.count 失去了响应性连接
let { count } = state 

count++ // state.count值依旧是0

解决方案:

• 
  
• 
  

  使用toRefs解构不会失去响应

  
  

  
  

  使用toRefs解构后的属性是ref的响应式数据

  
  

  
  
  

const state = reactive({ count: 0 })
//使用toRefs解构,后的属性为ref的响应式变量
let { count } = toRefs(state)

count.value++ // state.count值改变为1

建议: ref一把梭

当使用reactive时,如果不了解reactive失去响应的情况,那么使用reactive会造成很多困扰!

推荐使用ref总结原因如下:

0. 
   
1. 
   

   reactive有限的值类型:只能声明引用数据类型(对象/数组)

   
   
   
2. 
   

   reactive在一些情况下会失去响应,这个情况会导致数据回显失去响应(数据改了,dom没更新)

   
   

   给响应式对象的字面量赋一整个普通对象,将会导致reactive声明的响应式数据失去响应

   
   

   <template>
   
      {{state.a}}
   
      {{state.b}}
   
      {{state.c}}
   </template>
   
   ​
   <script>
   let state = reactive({ a:1,b:2,c:3 })
   onMounted(()=>{
   
        //通AJAX请求获取的数据,回显到reactive,如果处理不好将导致变量失去响应,
   
       //回显失败,给响应式数据赋值一个普通对象
   
       state =  { a:11,b:22,c:333 }
   
      //回显成功,一个个属性赋值  
   
       state.a = 11
   
       state.b = 22
   
       state.c = 33 
   
    })
   </script>
   

   
   

   上面这个例子如果是使用ref进行声明,直接赋值即可,不需要将属性拆分一个个赋值

   
   

   使用ref替代reactive:

   
   

   <template>
   
      {{state.a}}
   
      {{state.b}}
   
      {{state.c}}
   </template>
   
   ​
   <script>
   let state = ref({ a:1,b:2,c:3 })
   onMounted(()=>{
   
       //回显成功
   
       state.value =  { a:11,b:22,c:333 }
   
    })
   </script>
   

   
   
   
3. 
   

   ref适用范围更大,声明的数据类型.基本数据类型和引用数据类型都行

   
   
   

虽然使用ref声明的变量,在读取和修改时都需要加.value小尾巴,但是正因为是这个小尾巴,我们review代码的时候就很清楚知道这是一个ref声明的响应式数据;

ref的.value小尾巴好麻烦!

ref声明的响应式变量携带迷人的.value小尾巴,让我们一眼就能确定它是一个响应式变量!虽然使用ref声明的变量,在读取和修改时都需要加.value小尾巴,但是正因为是这个小尾巴,我们review代码的时候就很清楚知道这是一个ref声明的响应式数据;

可能有些人不喜欢这个迷人小尾巴,如果我能自动补全阁下又如何应对?

volar插件能自动补全.value (强烈推荐!!!!!!!)

本人推荐ref一把梭,但是ref又得到处.value ,那就交给插件来完成吧!!!

• 
  
• 
  

  valor 自动补全.value (不是默认开启,需要手动开启)

  
  
  
• 
  

  不会有人不知道Vue3需要不能使用vetur要用valor替代吧?不会不会吧? (必备volar插件)

  
  
  

可以看到当输入ref声明的响应式变量时,volar插件自动填充.value 那还有啥烦恼呢? 方便!

本文会根据各位的提问和留言持续更新;

@ 别骂了_我真的不懂vue 说(总结挺好的,因此摘抄了):

reactive 重新赋值丢失响应是因为引用地址变了，被proxy代理的对象已经不是原来那个所以丢失响应了，其实ref也是一样的，当把.value那一层替换成另外一个有着.value的对象也会丢失响应 ref定义的属性等价于reactive（{value:xxx}）

另外说使用Object.assign为什么可以更新模板

Object.assign解释是这样的： 如果目标对象与源对象具有相同的键（属性名），则目标对象中的属性将被源对象中的属性覆盖，后面的源对象的属性将类似地覆盖前面的源对象的同名属性。

那个解决方法里不用重新赋值，直接Object.assign（state,{count:1}）即可，所以只要proxy代理的引用地址没变，就会一直存在响应性