在vue2.x 中，通过创建 Vue 组件，我们可以将界面中重复的部分连同其功能一起提取为可重用的代码段。仅此一项就可以使我们的应用在可维护性和灵活性方面走得相当远。但是，当出现一个大型应用的，有几百个组件的时候，共享和重用代码变得尤为重要。那么这个时候vue3.x推出了组合式API来提高代码的共享和重用。

组合API setUp选项

setUp ：在组件创建之前执行，一旦props被解析，就将作为组合式 API 的入口。由于setUp的调用发生在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>

但是这个时候新的问题出现了，点击按钮的时候，内容并不会发生改变。这是因为变量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>

这个时候点击按钮就可以将内容修改为"hello李四",那么这个时候有人就疑惑了ref的作用是什么呢？那么我们修改下上面的例子:

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

这种情况下程序依然可以正常运行，点击按钮可以改变文本的内容，可以看出reactive接受的是一个对象，ref接受的是一个基本类型数据。
那么很多人（包括我）在学习的时候就疑问，有了reactive为什么还有ref。它们之前有什么区别呢。

reactive和ref的区别

首先我们打印一下 text 和 testObj

`text` 和 `testObj`截图

可以看出testObj是一个Proxy对象。testObj是一个RefImpl。那么RefImpl是什么呢？我们看看源代码

ref代码

第一次写文章，不喜勿喷，欢迎指正。谢谢。