vue3中reactive用来实现复杂数据类型的响应式

_处女座程序员的日常

已于 2023-02-26 17:47:32 修改

阅读量374

点赞数

分类专栏： vue 前端文章标签： javascript vue.js 前端 typescript

于 2023-02-26 16:26:59 首次发布

本文链接：https://blog.csdn.net/qq_42931285/article/details/129228190

版权

前端同时被 2 个专栏收录

365 篇文章 12 订阅

订阅专栏

vue

210 篇文章 4 订阅

订阅专栏

文章展示了在Vue中，ref用于基础数据类型的响应式，而reactive适用于复杂数据类型的响应式。尽管使用ref包装对象的属性可以达到类似的效果，但reactive是针对整个对象进行响应式处理。示例代码比较了ref和reactive在处理对象时的差异，并通过打印输出说明了它们的使用效果。

摘要由CSDN通过智能技术生成

说明：

ref 用来实现基础数据类型的响应式
reactive 用来实现复杂数据类型的响应式
其实使用re操作复杂数据类型.value的效果和直接使用reactive的效果是一样的

<template>
<!-- reactive方法和ref方法的对比 -->
    <p>{{objRet.num}}</p>
</template>

<script lang='ts'>
import { defineComponent,reactive,ref } from 'vue'
export default defineComponent({
  setup () {
    // ref 用来实现基础数据类型的响应式
    // reactive 用来实现复杂数据类型的响应式
    let obj = {
      num:20
    }
    let objRet=reactive(obj);
    console.log("objRet:",objRet);
    // 不需要.value
    console.log(objRet.num);// 20
    
    // 对比一下ref
    let obj2 = {
      num:30
    }
    let objRef = ref(obj2)
    console.log("objRef:",objRef.value);
    console.log(objRef.value.num);//20
    

    return {
      objRet
 
    }
  }
})
</script>
 
<style lang = "less" scoped>
  
</style>