在vue2.x 中，通過創(chuàng)建 Vue 組件，我們可以將界面中重復的部分連同其功能一起提取為可重用的代碼段。僅此一項就可以使我們的應用在可維護性和靈活性方面走得相當遠。但是，當出現(xiàn)一個大型應用的，有幾百個組件的時候，共享和重用代碼變得尤為重要。那么這個時候vue3.x推出了組合式API來提高代碼的共享和重用。

組合API setUp選項

setUp ：在組件創(chuàng)建之前執(zhí)行，一旦props被解析，就將作為組合式 API 的入口。由于setUp的調(diào)用發(fā)生在data property、computed property 或 methods 被解析之前，所以不能再setup中使用this獲取。那怎么辦呢？我們可以通過setUp返回一個對象，暴露給組件的模板以及其余部分。
例如：

    <template>
        <div >
            <div>你好{{text}}</div>
            <button @click="changeTxt">修改Txt</button>
        </div>
    </template>
    <script>
    import { defineComponent } from "vue";
    export default defineComponent({
        setup(){
            let text = "張三"
            const changeTxt = ()=>{
                text = "李四"
            }
            return {
                text,
                changeTxt
            }
        }
    })
    </script>
    <style>
    </style>

但是這個時候新的問題出現(xiàn)了，點擊按鈕的時候，內(nèi)容并不會發(fā)生改變。這是因為變量text是非響應式變量。那么這個時候就引出了響應式變量ref、reactive

關于ref 和 reactive

關于上面的例子我們可以修改為:

    <template>
        <div >
            <div>你好{{testObj.text}}</div>
            <button @click="changeTxt">修改Txt</button>
        </div>
    </template>
    <script>
    import { defineComponent, reactive, ref } from "@vue/runtime-core";
    export default defineComponent({
        setup(){
            const testObj = reactive({text:"張三"})
            const changeTxt = ()=>{
                testObj.text = "李四"
            }
            return {
                testObj,
                changeTxt
            }
        }
    })
    </script>
    <style>
    </style>

這個時候點擊按鈕就可以將內(nèi)容修改為"hello李四",那么這個時候有人就疑惑了ref的作用是什么呢？那么我們修改下上面的例子:

     <script>
    import { defineComponent } from "vue";
    export default defineComponent({
        setup(){
            const text = ref("張三")
            const changeTxt = ()=>{
                text.value = "李四"
            }
            return {
                text,
                changeTxt
            }
        }
    })
    </script>

這種情況下程序依然可以正常運行，點擊按鈕可以改變文本的內(nèi)容，可以看出reactive接受的是一個對象，ref接受的是一個基本類型數(shù)據(jù)。
那么很多人（包括我）在學習的時候就疑問，有了reactive為什么還有ref。它們之前有什么區(qū)別呢。

reactive和ref的區(qū)別

首先我們打印一下 text 和 testObj

`text` 和 `testObj`截圖

可以看出testObj是一個Proxy對象。testObj是一個RefImpl。那么RefImpl是什么呢？我們看看源代碼

ref代碼

第一次寫文章，不喜勿噴，歡迎指正。謝謝。