組合API-ref函式

Harry宗發表於2024-07-10
API函式

  • 當你明確知道需要的是一個響應式資料 物件 那麼就使用 reactive 即可

  • 其他情況使用ref

<template>
  <div class="container">
    <div>{{name}}</div>
    <div>{{age}}</div>
    <button @click="updateName">修改資料</button>
  </div>
</template>
<script>
import { ref } from 'vue'
export default {
  name: 'App',
  setup () {
    // 1. name資料
    const name = ref('ls')
    console.log(name)
    const updateName = () => {
      name.value = 'zs'
    }
    // 2. age資料
    const age = ref(10)

    // ref常用定義簡單資料型別的響應式資料
    // 其實也可以定義複雜資料型別的響應式資料
    // 對於資料未之的情況下 ref 是最適用的
    // const data = ref(null)
    // setTimeout(()=>{
    //   data.value = res.data
    // },1000)

    return {name, age, updateName}
  }
}
</script>

相關文章