Vue2與vue3的不同之一setup（），setup可以說是vue3的靈魂所在，vue3把vue2的選項式api升級為了組合式api，能夠有效增加大項目代碼的代碼可讀性，但是和vue2自動把數據變為響應式不同，vue3多了一步配置。

    請大家看一個例子，我在setup中創建了一個名為name的數據，他的值為張三，另外我還配置了一個方法，它的作用是修改name，并打印‘name’的值。

    當我點擊時，可以看到，張三并沒有發生改變，但是console中打印出的name卻是李四，說明數據已經改變了，但是頁面卻沒有發生改變。這里沒有發生改變的原因如下：

     因為name此時還不是響應式數據，如果是vue2中這里肯定已經實現了，但這里是vue3，且this沒有了。大家可以看到我上邊的代碼中引入了一個叫做ref和reactive的東西，這兩個其實就是讓數據變為響應式的關鍵，官方對他們這樣解釋。

    下面我們修改一下代碼。

    可以看到，這次我們的name不單純是一個字符串而是變成了一個對象，并且頁面中張三已經被改成李四了，大家請注意看我的代碼，因為ref讓原本的張三變成了一個對象，所以當我們想要修改name的值的時候，一定要加上.value才能正常修改。

    然后，我們再說一下reactive（），其實他與ref相似，不同的地方在于，reactive只能用來讓對象變成響應式，并且，因為其響應式化的本身就是對象，所以vue已經幫我們取到了其本身的值，這里我們不用寫.value，但是如果用的是ref，還是需要.value。

    大體上說，ref可以用來定義基本類型數據，而reactive則用來定義對象類型數據，但在實際開發中，ref也可以定義對象類型數據，ref會自動調用reactive方法來實現對象類型數據的響應式。

    另外，接下來還會為大家帶來vue3的用戶代碼片段，vue2的可以點一下這里。