# Vue3寫一個倒計時元件 vue3 beta版本釋出已有一段時間了，文件也大概看了一下，不過對於學一門技術，最好的方法還是實戰，於是找了一個比較簡單的元件用vue3來實現，參考的是vant的countdown元件。 Vue Composition API文件： [如果對vue3語法還不熟悉的，可以先看一下語法](https://vue-composition-api-rfc.netlify.app/api.html#setup) 目前文件還是英文的，這裡簡單翻譯下幾個比較核心的東西： ## setup setup函式是一個新的元件option選項，作為在元件內使用Composition API的入口。 ### 1. 呼叫時機 setup會在元件例項建立並且初始props解析後立即呼叫。對於生命週期這一層面，會在beforeCreate鉤子之前呼叫。 ### 2. 配合template使用 如果setup返回一個物件，那麼物件的屬性會被合併到當前元件的render上下文。 從setup中返回的refs在template中獲取值時會被自動unwrapped(猜測可能是get值時用了unref。unref也是一個新的api，val = isRef(val) ? val.value : val的語法糖)，因此在模板中取值時無需加上.value。 ### 3. 配合render函式使用 setup裡不僅可以返回一個物件，也可以直接返回一個render函式。不過要注意的是，跟template會自己unwrapped不同，在render中使用refs的值時，需要加上.value。 ### 4. 引數 setup接收兩個引數，第一個是用的最多的props，第二是ctx上下文，不過是精簡版，只提供了三個屬性attrs，slots，emit,這三個都是寫元件必不可少的。 - emit: 同父元件通訊用 - slots: 插槽分發內容 - attrs: 可以用於封裝高階元件, 配合v-bind進行屬性透傳 ### 5. this在setup中不可用 在vue2，你可以在每一個生命週期或者方法中通過this獲取當前例項，不過在setup方法中是無法獲取到this的。但是，可以通過getCurrentInstance獲取到當前例項。 ## reactive 傳入一個物件並返回對目標源的響應式代理結果，等同於2版本的Vue.observable()。 ## ref 類似reactive，但是傳入的是基本值，取值時需要加上.vaule去獲取，而reactive包裹的物件可以直接像物件那樣去獲取值。 不過當資料結構是陣列或者Map時，即使陣列已經被reactive包裹了，如果數組裡面的某一項是ref，依然需要通過.value去獲取值。 ```javascript //ref const count = ref(0) console.log(count.value); //reactive const state = reactive({ count }) console.log(state.count); //reactive with array const arr = reactive([ref(0),3,5]) // need .value here console.log(arr[0].value) ``` ## computed 接收一個回撥函式作為getter，或者傳入帶有getter和setter物件 。一個computed會返回一個物件，有多個computed時就需要呼叫多次 ```javascript const plusOne = computed(() => count.value + 1) const plusTwo = computed({ get: () => count.value + 1, set: val => { count.value = val - 1 } }) ``` ## toRef, toRefs toRef可用於為源響應物件上的某個屬性建立ref。 ```javascript export default { //由於Javascript函式引數是按值傳遞，所以如果傳遞的是基本型別，傳參可以理解為複製變數值。基本型別複製後倆個變數完全獨立，之後任何一方改變都不會影響另一方。如果直接傳遞props.numner也就是10進去，函式內部跟外部是獨立的，函式裡面的操作無法影響到外部變數，除非你傳遞的是一個物件比如整個props，才能保持引用。但是如果你只需要某個屬性，傳整個進去也是沒必要的。此時toRef就顯的很有用了。toRef返回的就是一個物件，通過這個物件.value可以獲取到值。 setup(props) { // {number:10} useSomeFeature(toRef(props, 'number')) } } ``` toRefs可以將響應式物件轉換為普通物件，其中結果物件上的每個屬性都是指向原始物件中相應屬性的引用。可以用於解構的時候防止丟失響應。 ## 生命週期 生命週期大部分都改了名字，寫法上也稍有不同。 1. 需要自己import； 2. 在setup中呼叫； - beforeCreate -> use setup() - created -> use setup() - beforeMount -> onBeforeMount - mounted -> onMounted - beforeUpdate -> onBeforeUpdate - updated -> onUpdated - beforeDestroy -> onBeforeUnmount - destroyed -> onUnmounted - errorCaptured -> onErrorCaptured ## 語法就大概介紹這些，具體的內容還是要看看官方文件。下面看一下元件的具體程式碼 ```javascript ``` 主要的變化還是在setup，沒有data，也沒有methods了，都需在setup裡面返回才可以使用。基本上絕大部門的程式碼都寫在setup裡面，包括事件，生命週期等， 當然這也很變數的作用域有關。也可以考慮把邏輯抽取出去，不過傳參的時候，需要使用toRef或者toRefs，不能傳基本值。 ## 高階元件 主要是用attrs來實現屬性的繫結，但是具體是不是這樣寫，我還不太確定。 ```javascript ``` ## DEMO ```javascript ``` ## 展示效果  ## 倉庫地址 [https://github.com/linrunzheng/vue3-learn](https://github.com/linrunzheng/vue