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

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

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

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

    下面我們修改一下代碼。

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

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

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

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