[前端暴龙机，Vue2.x 进化 Vue3 ] Day27. Vue3 ref & reactive 小练习

说了那麽多，感觉还是有点模糊~ 没关系，我可能也差不多 ( 哈哈
所以还是透过实作练习，让自己更了解，看见那更明朗的天空吧

目标 : 透过串接 API 接收取到的资料，并且可以点击按钮来更新资料

【Vue 3】 ref & reactive 小练习

RandomAPI

ref 方式

可能有听说过，最不能易出错的就是一路使用 ref 到底，那麽我们来看看是不是真的这麽好用吧~

<div id="app">
  <h3> 使用 ref 方式 : </h3>
  <ul>
    <li v-for="person in mylist" :key="person.id.value">
      {{ person.name.title }}.{{ person.name.first }} {{ person.name.last }}
    </li>
  </ul>
  <button @click="getAPI">下一笔</button>
</div>

import {createApp,ref,reactive,onMounted} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.esm-browser.min.js' 

createApp({
  setup() {
    
    // 宣告空阵列来接 API 数据
    const mylist = ref([]);
    
    // 呼叫 API 的方法
    function getAPI(){
     axios.get('https://randomuser.me/api/?results=5').then(res=>{

        //  ref 必需透过 .value 来赋予值
        mylist.value = res.data.results;
      })
    }
    
    onMounted(()=>{
     getAPI()
    })

    return {
      mylist,
      getAPI
    }
  }
}).mount('#app')

记得，如果是用 ref 的方式，要加上 .value 来存取值
范例中，一开始呼叫 API 取得资料，接着透过 .value 存值
最後按钮点击时，需要再一次呼叫 API 取新一笔资料，刚好直接又透过 .value 存入新的值
目前看起来，好像真的很方便，也不太出错呢

reactive 方式

接着，来看使用 reactive 是否会变得复杂呢?
以之前的写法，我自己会写成下面这样 ( 不知道是不是跟我一样 ~

<h3> 使用 reactive 方式 : </h3>
<ul>
    <li v-for="member in memberlist" :key="member.id.value">
      {{ member.name.title }}.{{ member.name.first }} {{ member.name.last }}
    </li>
</ul>

import {createApp,ref,reactive,onMounted} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.esm-browser.min.js' 

createApp({
  setup() {
    
    // 使用 reactive 方式来接值
    const memberlist = reactive([]);
    
    function memberAPI(){
       axios.get('https://randomuser.me/api/?results=5').then(res=>{
        memberlist = res.data.results;
      })
    }
    
    onMounted(()=>{
     memberAPI()
    })

    return {
      memberlist,
      memberAPI
    }
  }
}).mount('#app')

使用 reactive 宣告一个空阵列来接，高高兴兴的直接把值塞进去
因为想说 reactive 是不需要透过 .value 存取值
结果没想到，为了保持 Proxy 架构，我使用了 const ➪ 结果这麽塞值是错误的

➢ 所以我们再来改写吧~

// 使用 reactive 方式来接值
const memberlist = reactive({ lists: []});

function memberAPI(){
   axios.get('https://randomuser.me/api/?results=5').then(res=>{
    memberlist.lists = res.data.results;
  })
}

reactive 的方式变成，需要宣告成物件的型态，然後里面有一个 keyValue 为 lists，值为空阵列
这麽一来，才不会造成改变 const 错误

html 部份的 v-for 也要稍微调整，最後再加上换下一笔资料的功能

<h3> 使用 reactive 方式 : </h3>
<ul>
    <li v-for="member in memberlist.lists" :key="member.id.value">
      {{ member.name.title }}.{{ member.name.first }} {{ member.name.last }}
    </li>
</ul>
<button @click="memberAPI">下一笔</button>

import {createApp,ref,reactive,onMounted} from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.1.4/vue.esm-browser.min.js' 

createApp({
  setup() {
  
    // 使用 reactive 方式来接值
    const memberlist = reactive({ lists: []});
    
    function memberAPI(){
       axios.get('https://randomuser.me/api/?results=5').then(res=>{
        memberlist.lists = res.data.results;
      })
    }
    
    onMounted(()=>{
     memberAPI()
    })
    
    return {
      memberlist,![/images/emoticon/emoticon01.gif](/images/emoticon/emoticon01.gif)
      memberAPI
    }
  }
}).mount('#app')

最後终於也完成了同样的功能
不过如果依照旧有的撰写习惯，ref 的方式，我们一直强调要用 .value 来存取值
所以至少会记得，但是 reactive 可能跟我一样，一开始会写错，需要再经调整
哈哈，可能撰写习惯不同，有些人就不会犯这种错误
难怪有些人会推崇 一路使用 ref 到底 ，好像真的满好用的呢哈哈
【Vue 3】 ref & reactive 小练习演示范例