vue3 reactive ref（vue3中的ref()）

ref()

接受一个值 
    
    
，返回一个响应式的
     


     


    ，可以修改的ref对象 




 




 


，这个对象只有一个.vaule属性    
    
    。

ref对象可以通过.value属性进行修改 

   

   

，修改后的值也是响应式的
     

     

   ，并且修改后会触发相关的副作用  


     


     


。

如果将一个对象赋值给ref  




  




  

，则这个对象会通过reactive()转为具有深层次的响应式对象


 




 




。

对于属性值是ref对象的对象 


  


  


，解构后也具有响应式   

   

   。

1. ref在模板中自动解包

当ref作为顶层属性在模板中使用时
     
     
  ，自动解包   




   




   
，不用.value即可获取值   

     

     

。

const count = ref(1); count.value = 2;

直接使用

<!-- count值为2 --> <div>{{count}}</div> <!-- 正确 --> <div>{{count + 1}}</div>

若不是顶层属性, 假如值需要逻辑操作 



 



 



，则会出现问题



  




  




。

const obj = { age: ref(1) } <!-- 可以正常显示--> <div>{{obj.age}}</div> <!-- 会报错 渲染的结果会是一个 [object Object]           ，因为 obj.age 是一个 ref 对象  


  


  。需要obj.age.value 才能正常显示--> <div>{{obj.age + 1}}</div>

解构后也具有响应式

const {age} = obj;

2. ref 在响应式对象中的解包

一个ref对象嵌套在一个响应式对象中
    




    




    ，属性访问时会自动解包

const a = ref(1) const state = reactive({ age: a }) console.log(state.age); // 1 直接解包














，不用state.age.value

如果将一个新的 ref 赋值给另一个对象具有 ref属性的           ，那么它会替换掉旧的 ref    
     
     
。

const b = ref(3); // 假如将b直接赋值给state.age,因为b是一个ref对象
     



     



     ，则会替代之前的ref对象













，则现在state.age不管如何变化都变量a没有了关系 state.age = b; console.log(stata.age); // 3 console.log(a); // 1 // 假如将b.value赋值给state.age,其实b.value就相等于一个值 
    
    
，并不是ref对象
     


     


    ，则不会替代之前的ref对象 




 




 


，则state.age变化 

   

   

，之前的变量a也会随之变化 state.age = b.value; console.log(state.age); // 3 console.log(a); // 3

只有当嵌套在一个深层响应式对象内时
     

     

   ，才会发生 ref 解包




   




   




。当其作为浅层响应式对象的属性被访问时不会解包 



 



 。

3. 数组和集合类型的 ref 解包

跟响应式对象不同  




  




  

，当 ref 作为响应式数组或像 Map 这种原生集合类型的元素被访问时 


  


  


，不会进行解包               。

const books = reactive([ref(Vue 3 Guide)]) // 这里需要 .value console.log(books[0].value) const map = reactive(new Map([[count, ref(0)]])) // 这里需要 .value console.log(map.get(count).value)

总结

返回一个具有响应式的ref对象
     
     
  ，并只有一个属性.value可通过.value 获取或修改值




    




    




。 在模板中自动解包   




   




   
，对于对象在模板中使用若需要逻辑操作需.value










。 解构出来的也具有响应式 对于响应式对象可以解包 当一个ref对象赋值给另一个ref对象 



 



 



，则会替换旧的ref对象 对于响应式数组则不会解包