Vue composition api 定義資料

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

reactive

一定是純值
只能放入物件
盡量使用const宣告，因為基本上是不可改的
是非常標準的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

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

以下為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>