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

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

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

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

    下面我們修改一下代碼。

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

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

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

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