---
tags: Javascript, Vue
---

# Vue composition api 定義資料

`composition api`定義資料有兩種方式，一個是`reactive`一個是`ref`

## reactive

1. 一定是純值
2. 只能放入物件
3. 盡量使用const宣告，因為基本上是不可改的
4. 是非常標準的[Proxy](https://joe94113.github.io/2022/05/24/js-proxy/)物件

以下為`reactive`定義資料範例:

若沒有使用`const`宣告，是可以被覆蓋掉的，會失去`Proxy`的特性。

<div id="app">
  {{person}}
  <input type="text" v-model="person.name">
</div>
<script type="module">
// import { createApp } from '...';
const { createApp, reactive } = Vue;

const app = createApp({
  setup() {
    const person = reactive({
      name: 'John',
      age: 30
    });

    person.name = 'Jane'; // 改變值

    return {
      person
    };
  },
});

app.mount('#app')
</script>

## ref

1. 可保存原始類型，例如字符串、數字或布爾值
2. 可重新分配物件

以下為`ref`定義資料範例:

<div id="app">
  {{person}}
  <input type="text" v-model="num">
</div>
<script type="module">
// import { createApp } from '...';
const { createApp, ref } = Vue;

const app = createApp({
  setup() {
    // 宣告一個 ref
    const num = ref(1);
    console.log(num);
    num.value = 2; // ref 更新值

    const person = ref({
      name: 'John',
      age: 30
    });

    person.value.name = 'Jane'; // ref 更新值

    person.value = {
      name: 'Jane',
    }; // ref 重新分配值

    return {
      num
    };
  },
});

app.mount('#app')
</script>

## reactive 和 ref

`ref`使用時機:

* 他是一個原始值，例如字串，布林值，數字等等
* 他是一個重要重新分配的物件

`reactive`使用時機:

* 不需要重新分配的物件，並且希望避免`ref`