vue3.0 Composition API 上手初體驗 神奇的 setup 函數 (一) 響應數據的綁定
從網上大家對於 vue 3.0 的最大的變化，就是 Vue Composition API 的看法來說，兩極分化比較嚴重。一種是認爲這種寫法實在太優秀了，很好，很喜歡。另外一種則認爲變得沒有以前那麼清晰了，增加了學習成本。
那麼我是怎麼認爲的呢？當然是第一種想法啊！你可知道，曾經我一度感覺到 vue 的語法實在是太過於變態，進而放棄使用 react 開發一年有餘。後來因爲來上海，入職的公司都是 vue 項目，故而我又開始了 vue 代碼的編寫。
但是，說實話，對於原來的 vue 的語法，我個人還是比較崩潰的。比如令人無法理解的 this，你別問，用就對了！
當然，還是有很多人喜歡 vue 的各種語法糖的，比如 v-for \ v-model 之類的。我個人表示這些確實降低了開發難度，但也確實變得更加費解。不過，語法糖這事兒，用着用着，就感覺，真爽。所謂嘴上不想要，身體還是很誠實的。
寫一個簡單的 setup 函數
我們編輯我們項目中的 src/views/Home.vue 文件，改成一下代碼：
<template>
<router-link to="/about">點這裏去關於我們頁面</router-link>
<div class="home">
這裏是一個計數器 >>> <span class="red">{{count}}</span> <br>
<button @click="countAdd">{{btnText}}</button>
</div>
</template>
<script>
// ref 是 vue 3.0 的一個重大變化，其作用爲創建響應式的值
import { ref } from 'vue'
// 導出依然是個對象，不過對象中只有一個 setup 函數
export default {
setup () {
// 定義一個不需要改變的數據
const btnText = '點這個按鈕上面的數字會變'
// 定義一個 count 的響應式數據，並賦值爲 0
const count = ref(0)
// 定義一個函數，修改 count 的值。
const countAdd = () => {
count.value++
}
// 導出一些內容給上面的模板區域使用
return {
btnText,
count,
countAdd
}
}
}
</script>
<style lang="scss">
.home {
line-height: 2;
.red {
color: red;
}
}
</style>
我們把項目跑起來看看結果，如下圖所示：
當然，點擊按鈕，數字肯定是會相加的。這裏就不截圖了。
劃重點
首先，我們的組件不用寫一堆東西了，只需要一個 setup 函數即可。
這樣做得好處就是，我們可以把很多零碎的東西拆成公共組件，然後交給其他組件去調用。我寫 vue 有一個痛苦的點就是很多的東西我想抽離成組件，但是一拆，就得有 data (), methods 等等一堆。因此，有時候就偷懶，懶得拆了。
現在好了，可以一個函數就是一個組件，多方便啊！
其次，在 setup 函數中 return 出去的東西，可以在模板區域直接使用，也不必理會 this 這個神奇的東西。
然後就是 ref 這個函數，我們可以從 vue 中引入它，它傳入一個值作爲參數，返回一個基於該值的 響應式 Ref 對象，該對象中的值一旦被改變和訪問，都會被跟蹤到，通過修改 count.value 的值，可以觸發模板的重新渲染，顯示最新的值。
我們在控制檯打印 count，如下圖，我們可以看到它的結構，如下圖所示：
vue 3.0 封裝得很好，我們在模板區域，只要使用 count 就可以顯示它的值了，不需要使用 count.value。當然，我們修改這個值，還是需要在 js 中使用 count.value 的。
好，消化一下，下一講，我們來說說如何搞一個響應式的對象數據。
本文由 FungLeo 原創，允許轉載，但轉載必須保留首發鏈接。
《vue3.0 Composition API 上手初體驗》 文章目錄地址： https://blog.csdn.net/fungleo/category_10020552.html 我會不定期的補充一些相關內容，歡迎關注訂閱！
文章代碼倉庫 https://github.com/fengcms/vue3-demo 會用 git 的朋友，可以去直接下載我的代碼。當然，給我點個 star 啥的，也不是不可以的哈！