Day_26: 让 Vite 来开启你的Vue之 跌入深坑_ 我该用 reactive 还是 ref

Hi Dai Gei Ho~ 我是 Winnie ～

在接下来最後三篇文章中，我们将要进入 Vue跌坑主题系列，而这系列会来介绍下 自己之前在学习Vue时所碰过的问题。
就像学骑脚踏车一样，摔过痛过如果留下疤痕，下次在看到就会知道要怎麽避开。

在今天的文章中，要来说说 当我们要来定义资料时 是要先使用 ref 还是 reactive呢?

首先，其实这个没有谁是绝对正确的答案，主要还是需要依照 资料状态 来判断使用 ：

假如 今天单纯要定义一个 基本型别 的响应资料，所以很简单的我们可以使用 接受任何型态资料的ref()来包装，再透过.value 来读取值。

范例如下：

  const count = ref(0); 
  const isShow = ref(false); 
  

但如果 资料 的型别为 物件 或是阵列的时候，情况又会不一样了，先让我们来看看以下范例

 const person1 = ref({
     name: 'winnie' 
 })
 
  const person2 = reactive({
     name: '大侠爱吃汉堡饱' 
 })
 
 onMounted(()=>{
     console.log(person1.value.name) //ref()
     console.log(person2.name) //reactive()
 })
 

从以上程序码，我们可以看到 在语法上 ref 需要透过.value来取物件中的值，而在写法上就需要用到三层了，而 reactive 只需用物件取值的方式，所以在写法只需要两层。

另外我们再来看看 以下另一个范例：

    // App.vue
    const name = ref('winnie')
    const age = ref(24)
    const address = ref('桃园')
    const setName = ()=>{
        name.value = '大侠爱吃汉堡饱'
    }
    
    
    provide('name',name)
    provide('age',age)
    provide('address',address)
    // 略..

    // user.vue

    const name=inject('name')
    const address=inject('address')
    const age=inject('age')
 
    // 略..

从上我们可以看到 当 有一笔user资料 要provide 给多个子元件引用时， 如果我们透过ref()一一来定义，好像会显得元件中的相关资料太分散了，而且在子元件也要呼应来定义，当程序码一多也就容易导致错误，易读性变低。而如果我们改成 reactive来进行包装的话 就可以把相关资料定义在物件之中，在provide出去，不仅很方便，同时还可以减少资料分散的问题。

范例如下：

 const userData = reactive({
    name :'winnie',
    age :24,
    address :'桃园',
 })
 provide('user',userData);

总结以上，针对两个 响应式资料定义的方法中，以我个人选择 ，在 单纯资料状态使用上 我会使用ref来进行响应式资料包装，而如果是 物件或阵列 的型别 ，我多半会使用 reactive 来进行包装，总归一样还是要看当下 资料状态关联 来选择你要如何使用。

以上就是今天文章，如有问题欢迎大家多多指教，谢谢大家。

-- 小记事 --

今天无意间看了自己六年前FaceBook的动态回顾，只想对当时的我说 幸好我也没辜负高中时的你...

最後附上 高三时 我每天反覆看的影片 陈绮贞 天天想你