Vue是一款持續受歡迎的JavaScript框架，被用來構建現代化的前端應用程序。Vue的一個核心特性就是它的組件化系統，它使得應用程序可以被分解為組件，這些組件可以看做是一組相關的HTML、CSS和JavaScript的集合。這種組件化系統使得應用程序的代碼更加可維護，更加易于理解，并且可以提高代碼的可重用性。

Vue組件也有時需要進行通信。為了實現不同組件之間的通信，我們可以使用Vuex狀態管理系統或者使用組件props和事件。然而，我們還可以使用一種新的技術，叫做Vue Compositions，它可以讓我們在組件之間共享代碼邏輯。

import Vue from 'vue'
import { ref, watchEffect } from 'vue'
export default {
setup () {
const count = ref(0)
watchEffect(() =>{
console.log(`Count is now: ${count.value}`)
})
const increment = () =>{
count.value++
}
return {
count,
increment
}
}
}

上面這段代碼就是一個使用Vue Composition編寫的計數器組件。代碼中我們使用Vue3.0提供的新的響應式API-ref，來定義了一個名為count的變量。接著我們使用watchEffect方法來監聽count變量的變化，每當count改變后就會觸發watchEffect中的回調函數。

我們還定義了一個increment方法，用來對count進行遞增。最后，我們通過Vue的新的setup方法，將count和increment方法作為返回值輸出，在組件中可以直接使用。這是Vue Composition的一個非常基本的應用，使用Vue Composition，我們可以輕松地在組件之間共享代碼邏輯。