今天是第十九天，我想簡單分享一下響應式APIs(Reactivity APIs)

Vue 最標誌性的功能就是其低侵入性的響應式系統。組件狀態都是由響應式的JavaScript對象組成的。當更改它們時，視圖會隨即自動更新。這讓狀態管理更加簡單直觀。

而我們Vue3則使用了Proxy來作為響應式對象。如果想要自動更新資料，則必須呼叫正確的API，否則 Vue 無法監控到資料是否更新，當然就無法通知調用 render 函數渲染新的畫面，而我們可以使用ref和reactive來宣告響應式。

想更深度瞭解可以參考下方這些文章

https://tonyko-tw.medium.com/vue3-%E9%9F%BF%E6%87%89%E5%BC%8F%E5%8E%9F%E7%90%86-41b878ed263f

https://vuejs.org/guide/extras/reactivity-in-depth.html

我用官方網站範例做例子
這裡使用 reactive()建立一個響應式對象

這裡是JS的部分
在組件模板中使用響應式狀態，需要在setup()定義並return，也可以在裡面定義更新state的function

<script>
    const { reactive } = Vue;
    const app = {
    setup(){
        const state = reactive({
            count:0,
        })
        function add(){
            state.count++
        }
        return { 
            state,add
            }
        },
    }
    const myVue = Vue.createApp(app).mount("#app");
</script>

Setup這個選項是一個全新函式，它會在元件實體尚未建立之前執行(調用的時間點跟之前提過的生命週期的beforeCreate一樣)是使用Composition API實際位置。

這裡是HTML的部分

<div id="app">
    <p>
        <button @click="add">{{state.count}}</button>
    </p>
</div>

隨著button不斷點擊，裡面的數字會從0不斷進行更新，一直增加

Vue.js 響應式API就分享到這邊，我們第二十天見