vue3.0 Composition API 上手初體驗 函數組件的開發與使用
在上一節中，我們討論了普通組件的開發與使用，其實相比較 vue 2.0 來說，差別並不大。
vue 3.0 的 Composition API 帶來的最大的特性，就是函數組件。通過函數組件，我們可以體會到 類似 react 編程的愉悅。這個章節，我們就來討論一下。
在 vue 2.0 中，當多個頁面或組件使用到相同邏輯的時候，我們會使用 mixin 來編寫邏輯。其實我個人在使用 mixin 時，感覺還是很方便的，但是當項目組的其他成員開始使用 mixin 時，我就經常崩潰了。
原因很簡單，當使用 mixin 時最大的問題就是——命名污染。比如，你在 mixin 中定義了一個 data 叫 love，那麼，在調用該 mixin 的頁面，就不能使用 love 了，否則會覆蓋掉。當然，方法名也是一樣的。生命週期的話，還存在重複執行的問題。
這導致的結果就是，要小心意義的使用 mixin，甚至，在某些團隊裏面，就嚴禁使用 mixin 了。
好，廢話不說，閒言少敘，開幹。
創建函數式子組件 Position.js
# 進入項目文件夾
cd ~/Sites/myWork/demo/vue3-demo
# 創建 Position.js 文件
touch src/components/Position.js
創建好文件後，我們錄入以下內容：
// 函數式組件， 該組件會返回鼠標在屏幕上的座標值
// toFefs 是將 reactive 對象的所有 key 都轉化爲 ref 值
// 這樣，在引入使用的組件中，就可以 用 const { x, y } = xx 來使用這些 key 對應的 value 了
import { onMounted, onUnmounted, reactive, toRefs } from 'vue'
// 這裏導出，就不是對象，而是一個函數了。
export default () => {
// 定義一個準備導出的對象數據
const position = reactive({
x: 0,
y: 0
})
// 定義一個會改變數據的函數
const update = page => {
position.x = page.pageX
position.y = page.pageY
}
// 使用生命週期，綁定和移除事件
onMounted (() => {
window.addEventListener('mousemove', update)
})
onUnmounted (() => {
window.removeEventListener('mousemove', update)
})
// 將 reactive 對象 轉化爲 ref 響應式的值，並返回
return toRefs(position)
}
這是一個簡單的函數組件，其作用是返回鼠標在屏幕的座標，通過 vue 提供的生命週期，我們來綁定和移除事件。
這裏的重點是什麼呢？在 vue2.0 當中，我們當然可以把一些函數方法給抽離出來，寫自定義的工具函數，以達到邏輯的複用。但是，這些只是純粹的 js 而已。而 vue3.0 提供的這種函數式風格的組件，可以非常方便的在函數中使用 vue 的特性，比如生命週期等等。
這樣，我們就能寫出更加靈活的功能了，而不僅僅只是業務邏輯代碼的抽離。這一點，也是 vue3.0 帶來的最大變革。
知識點
這裏，我們用到了 toRefs 方法。這個也算是 vue3.0 給我們提供的一個語法糖函數了。通過 toRefs 函數，它可以將 reactive 對象，轉化爲普通對象，而它的每個 key 值，都會是如 ref 數據那樣的格式，打印出來如下圖所示：
可以看到，每個 key 都變成了對象，並且，都有一個 value 值。這樣就變成了響應式的數據。
寫一個調用函數子組件的父組件
我們創建一個 src/views/Father.vue 文件，並在路由中設置地址爲 /father。錄入以下內容：
<template>
<div class="home">
鼠標 x 軸 座標 >>> <span class="red">{{ x }}</span> <br>
鼠標 y 軸 座標 >>> <span class="red">{{ y }}</span> <br>
</div>
</template>
<script>
// 引用我們開發的子組件
import Position from '@/components/Position.js'
export default {
setup () {
// 引用函數子組件並展開它的值
const { x, y } = Position()
// 將他的值 return 出去
return { x, y }
}
}
</script>
代碼非常簡單，只要引用我們的函數子組件，執行並拿到結果，return 出去，或者參與其他的計算等等，都是可以的。別的沒啥，看效果就行啦！
好的，通過本文的講解，相信大家對於函數組件的開發，已經有一定的瞭解了。下面，只要我們去想想自己的應用場景，去構建自己的項目，就可以啦！
本文由 FungLeo 原創，允許轉載，但轉載必須保留首發鏈接。
《vue3.0 Composition API 上手初體驗》 文章目錄地址： https://blog.csdn.net/fungleo/category_10020552.html 我會不定期的補充一些相關內容，歡迎關注訂閱！
文章代碼倉庫 https://github.com/fengcms/vue3-demo 會用 git 的朋友，可以去直接下載我的代碼。當然，給我點個 star 啥的，也不是不可以的哈！