稍微聊聊vue3的函式式程式設計

最開始讀的時候我是有點驚訝的，因為我一度認為這樣的改動會對vue原有的編寫習慣造成一定的衝擊，但讀到最後，我覺得這部分的改動是相當有趣並且相當值得去思考的。

因此在這裡和大家稍微聊一聊有關函式式程式設計的事情吧（如有錯誤請指正，不喜勿噴哈）。

首先來看一下demo


count is 
}<
/span>
plusone is 
}<
/span>
"increment"
>count++
<
/button>
<
/div>
<
/template>
import
from
'vue'
export
default
// watch
watch((
)=> count.value *
2, val =>`)
})// lifecycle
onmounted((
)=>
)// expose bindings on render context
return}}
<
/script>

如果換成我們目前的寫法，大概是這個樣子：


count is 
}<
/span>
plusone is 
}<
/span>
"increment"
>count++
<
/button>
<
/div>
<
/template>
export
default;}
, methods:},
computed:},
watch:`)
}},mounted()
};<
/script>

對比一下，我們不難發現：

vue2是將mounted，data，computed，watch之類的方法作為乙個物件的屬性進行匯出。

vue3新增了乙個名為setup的入口函式，value, computed, watch, onmounted等方法都需要從外部import。

剛看到這裡的時候我認為這會給原有的vue編寫習慣造成一定的衝擊，雖然在rfc中提到了vue3會完全相容vue2，但是從舊有的寫法遷移到最新的寫法終歸還是需要一定的時間與精力的（畢竟經歷過從swift2到swift3再到swift4的陣痛）

不過這樣函式式的程式設計有什麼好處呢？

我個人理解主要是：

函式式程式設計為元件的編寫提供了更高的靈活度與可讀性，並且更符合乙個前端編寫者的習慣（或者叫做「程式設計直覺」）。

在vue2中，watch、computed、data、method等api都是直接作為物件的屬性，傳給vue例項的。這意味著，我們開發者在開發時，腦中需要給這個物件的不同屬性（data、method、mounted之類的）建立聯絡。但一旦**規模變大，這種聯絡就非常吃力了，這集中表現在大型vue元件**的可讀性很低。我想，每個維護過1000+行vue元件的開發者都會有所體會

而在vue3中，我們可以像寫乙個方法一樣去寫這個元件的js邏輯部分，使用import來按需引入。這樣的好處顯而易見，首先就是我們需要寫的**量少了，其次就是我們可以封裝更多的子函式、引用更多的公共函式去維護我們的**，第三就是**的可讀性變高了。（當然，我們的打包體積也會變小）

另外，第一眼看到函式式程式設計的時候，我腦子中的第乙個想法就是：「woc！這不就變成另乙個react了嘛」。後來將rfc深入讀了下，才發現並不是這樣。

個人理解：vue和react最大的區別有兩個，一是雙向資料繫結 vs 單向資料流，二是模板語法 vs jsx。

雖然vue3在函式式程式設計方面，使其在一些api的使用、元件js層的邏輯上更像react，但是其模板語法的根基是沒有變的。就個人理解，模板語法相較於jsx，可能沒有那麼靈活，可能也會增加一定的**量，但其最大的好處是可讀性極強，並且實現了元件的「邏輯層」和「檢視層」的解耦。而react則是另乙個極端，使用jsx將邏輯和檢視完全耦合在了一起，雖然賦予了極高的靈活性，但也帶來了一定的問題——如果編寫元件的時候比較放飛自我，那麼後期閱讀元件以及維護的成本會直線上公升。

所以vue還是那個vue，react還是那個react。

以上

稍微聊聊vue3的函式式程式設計

Vue3響應式API ref和reactive

vue3實現響應式原理 Proxy

Vue3 的初次學習

稍微聊聊vue3的函式式程式設計

Vue3響應式API ref和reactive

vue3實現響應式原理 Proxy

Vue3 的初次學習

相關推薦