響應式數據

配合新的 setup 函式，偵測響應式數據的方法有 ref 與 reactive，響應式數據就是在數據變化時可以敏銳偵測到，並且隨之變動 virtual dom，達到 MVVM 的資料締結。

ref 函式

取代 data 函式，返回一個代理對象

ref 接受所有型別的數據，並且將資料包裝成一個代理，需要透過 .value 取得原始資料的數據，但須注意的是代理取得的值並非原始數據：

more

compostion 的意義

先講結論，composition API 是為了最大程度複用程式碼而誕生的資料結構寫法，
composition 顧名思義組件化就是要自由的拆分然後根據需求重新模組化複用。

之前的這篇文章有簡約提到 vue 3 變革的初探，本篇來延伸說明一下 composition API 背後的輪廓，
概念是根據 udemy Vue 3.x全家桶完全指南与实战課程：

more

Vite 問世以後總算不用再看著打包的百分比甚麼時候跑完了（灑花，按下 ctrl S 直接查看效果棒棒的！
不過再也沒有藉口可以喝口拿鐵啦XD

簡單介紹一下 Vite 是甚麼：

more

Composition API

Vue3 一項顯著的變革就是 Composition API，提升撰寫每一個元件專屬方法與資料的便利性：

Composition API is a set of APIs that allows us to author Vue components using imported functions instead of declaring options. It is an umbrella term that covers the following APIs.
Composition API 使得元件得以直接使用 import 進來的 functions，而不是透過選項來宣告，該特性封裝了以下的 API方法：

Reactivity API

例如 ref() 和 reactive() 可創造響應式（reactive）、計算式（computed）與監聽（watchers）的資料狀態

Lifecycle Hooks

例如 onMounted() 和 onUnmounted(), 容許使用編成方式撰寫元件的生命週期鉤子

Dependency Injection

例如 provide() and inject(), 提供一個祖父 -> 父(跳過) -> 子元件之間依賴注入（Dependency Injection）的接口，可以更好的分化元件之間的需求，了解更多內容可以詳讀這篇

簡單下個速記法：
provide() 與 inject() 看做是 prop 的昇級版，看個示意圖吧！

Setup script

Vue 3 將 Composition API 整合在單個元件的 <script setup> 標籤中，可以直接默認寫在裡面的內容都是提升到 created() 和 beforeCreated()的生命週期階段去實踐的

In Vue 3, it is also primarily used together with the <script setup> syntax in Single-File Components.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<script setup>
  import { ref, onMounted } from 'vue'

  // reactive state
  const count = ref(0)

  // functions that mutate state and trigger updates
  function increment() {
    count.value++
  }

  // lifecycle hooks
  onMounted(() => {
    console.log(`The initial count is ${count.value}.`)
  })
  </script>

  <template>
    <button @click="increment">Count is: </button>
  </template>

Reactivity API

多了一層代理（proxy）包裹所有的資料（data），使得 vue3 在處理 data 上有些變革：

• ref() 傳入 primative value
• reactive() 傳入 object value
  該選擇哪一種可以參考這篇 ref vs reactive in Vue 3?，滿有助益的解釋非常通透呢！

ref ()

當你需要將資料型態重新賦值（reassign）時可以選用 ref()，其實該方法背後也調用了 reactive() 只是你不知道而已，原始型別非常適合使用此代理包裹，另外當你的物件型別資料並沒有一開始的屬性值，例如空物件或空陣列，也可以考慮使用這個方式。
需要特別注意的點就是該方法取值要添加 .value 才能取得。

ref() Use-Case
You’ll always use ref() for primitives, but ref() is good for objects that need to be reassigned, like an array.

When you write ref([]) it is equivalent to ref(reactive([])).

reactive ()

當需要將物件型別的資料型態其中某個屬性值透過指向參考（dot notation）來修改值的時候可以選用 reactive()，前提在於你知道該物件內容的屬性值有哪些，屬性值彼此之間的牽動關聯性是甚麼，甚至可以直接撰寫 computed() 來決定某屬性值，該方法須注意不能被重新賦值更改指向參考，完全不會理你。

看到透過 reactive 包裝後的資料連 computed 都包裝了進去，是不是覺得非常的方便，不需要再另外切開去寫computed ，在尋找相依性的資料也變簡單。
https://medium.com/i-am-mike/vue-3-ref-%E8%B7%9F-reactive-%E6%88%91%E8%A9%B2%E6%80%8E%E9%BA%BC%E9%81%B8-2fb6b6735a3c

reactive() Use-Case
A good use-case for reactive() is a group of primitives that belong together:

props

非必要的 props

只需要在非必要的 props 加上? 就可以囉！不然 typescript 會一直跳出警語 ts(2322)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const props = defineProps<{ 
  span: number, 
  label: string, 
  name: string, 
  placeholder: string, 
  prefix?: {
    type: string,
    default: ''
  }, 
  suffix?: {
    type: string,
    default: ''
  }, 
}>()

方法

toRaw

轉換透過vue創造的代理物件為普通物件，可轉換的代理物件有 reactive(), readonly(), shallowReactive() 或 shallowReadonly()。
This is an escape hatch that can be used to temporarily read

Returns the raw, original object of a Vue-created proxy.

本篇尚未完整，持續更新中…

more