Vue2與vue3的不同之一setup（），setup可以說是vue3的靈魂所在，vue3把vue2的選項式api升級為了組合式api，能夠有效增加大項目代碼的代碼可讀性，但是和vue2自動把數(shù)據(jù)變?yōu)轫憫?yīng)式不同，vue3多了一步配置。

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

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

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

    下面我們修改一下代碼。

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

    然后，我們再說一下reactive（），其實他與ref相似，不同的地方在于，reactive只能用來讓對象變成響應(yīng)式，并且，因為其響應(yīng)式化的本身就是對象，所以vue已經(jīng)幫我們?nèi)〉搅似浔旧淼闹担@里我們不用寫.value，但是如果用的是ref，還是需要.value。

    大體上說，ref可以用來定義基本類型數(shù)據(jù)，而reactive則用來定義對象類型數(shù)據(jù)，但在實際開發(fā)中，ref也可以定義對象類型數(shù)據(jù)，ref會自動調(diào)用reactive方法來實現(xiàn)對象類型數(shù)據(jù)的響應(yīng)式。

    另外，接下來還會為大家?guī)韛ue3的用戶代碼片段，vue2的可以點一下這里。