Vue.js 3 Composition API 基本學習筆記-1:Ref、Props、watch、生命週期

/

本篇要解決的問題

Vue.js 3 問世以後,幾乎社團或是相關文章就一直冒出來,現在的版本也到 3.1.x,覺得可以來看一下文件了。結果很驚人的是直接就說不支援 IE 耶,有點困擾,因為公司的專案,還是會遇到「客戶說 IE 跑版」的狀況。

但最近看見社團上有人提到 Vue 3 有一個 Composition API 很好用,就去翻了一下文件,發現文件看完似懂非懂,可以知道的是 Composition API 能拿來重複使用寫過的 code,比方可以把調用某支 API 的 JS code 寫成 JS 檔後,直接 import 到 .vue 檔裡,就不用每次都重複寫。

本篇是學習 Vue Composition API 的一個筆記整理,因為文件沒全看懂,所以又去 Youtube 上找了教學,找到了之前推薦過的 The Net Ninja 的影片,真的是深入淺出,把原本 Vue 2 用的 Options API,一步步的轉成 Composition API,這樣比照之下,確實看比較懂。

二部影片的連結在這:

Vue JS 3 Tutorial for Beginners #10 – The Composition API (part 1)
Vue JS 3 Tutorial for Beginners #11 – The Composition API (part 2)

本篇就是這二部教學影片的重點整理。


Ref

ref 就是 Vue 2 時的 data

在 Vue 2 時我們會這樣寫:

data: {
  msg: 'Hello World'
}

到了 Vue 3 Composition API 就會寫成:

setup() {
  const msg = ref('Hello World');
  return { msg }
}

如果 console.log(msg) 來看,會看見 Composition API 的 ref 是一個 Object:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

console.log(msg)
console.log(msg)

如果想要改變 msg 的值,要改變的是它的 value

msg.value = 'Hello Lets write'

一開始在讀文件時,一直搞不懂為什麼要用 ref,不會跟 Vue 2 的 ref 重覆嗎?

後來看到影片的試範,把 msg 也當作 ref 來使用,就懂了他想說的意思。

對,真的可以像 Vue 2 的 ref 一樣來用:

ref 除了可以當值來用,也可以當作一個 Vue 節點。

最後影片中有說明了一大串 refreactive 的分別,後來是 Google 到一個 stackoverflow 上的解答才比較懂什麼時候用哪一個比較合適:ref vs reactive in Vue 3?


Props

Vue 2 時我們會藉由 Props 來傳值給子組件,Vue 3 Composition API 也可以接 Props 的值。

使用 Component 的 HTML 如下:

<HelloWorld title="Hello World"/>

在 HelloWorld.vue 的組件中就可以這樣接 Props 的值:

這是廣告,點擊一下可以幫本站多個一點點的廣告收入,謝謝

export default {
  props: ['title'],
  setup(props) {
    const title = props.title;
    console.log(title); // Hello World
  }
}

也可以把 Props 轉為 Ref

import { toRef } from 'vue'
export default {
  props: ['title'],
  setup(props) {
    const title = toRef(props, 'title');
    console.log(title.value); // Hello World
  }
}

watch、watchEffect、stop

watch,一次就是偵聽一個數據,但可以知道這個數據的舊值跟新值。

watchEffect,一次偵聽所有的數據,但只能偵聽到新值。

如果要停止 watch、watchEffect,如下:

const search = ref('');
const stopWatch = watch(search, (newValue, oldValue) => {
  console.log('watch search', newValue, oldValue)
})

const stopWatchEffect = watchEffect(() => {
  console.log('watchEffect', search.value)
})

setTimeout(() => {
  stopWatch();
  stopWatchEffect();
}, 5000)

生命週期

就像 Vue 2 我們會寫 createdmounted 一樣,Composition API 也可以寫在每個生命週期內要執行的動作。

import { onMounted, onUpdated } from 'vue'
export default {
  name: 'HelloWorld',
  setup() {
    onMounted(() => console.log('Mounted'));
    onUpdated(() => console.log('Updated'));
    // ...
  }
}

官方文件中有說明 Composition API 中的生命週期有哪些:

Options APIHook inside setup
beforeCreate
created
beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeUnmountonBeforeUnmount
unmountedonUnmounted
errorCapturedonErrorCaptured
renderTrackedonRenderTracked
renderTriggeredonRenderTriggered
activatedonActivated
deactivatedonDeactivated
資料來源:Lifecycle Hooks
Summary
Vue.js 3 Composition API 基本學習筆記-1:Ref、Props、watch、生命週期
Article Name
Vue.js 3 Composition API 基本學習筆記-1:Ref、Props、watch、生命週期
Description
本篇大綱:本篇要解決的問題。Ref。Props。watch、watchEffect、stop。生命週期。Composition API 可以把調用某支 API 的 JS code 寫成 JS 檔後,直接 import 到 .vue 檔裡,就不用每次都重複寫。
Augustus
Let's Write
Let's Write
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Front-End

幾個方便開發的 Console API 應用

Vue

D3.js、Vue 畫一個台灣地圖

Bot Telegram

在網頁上嵌入Telegram 頻道廣播訊息

Analytics Google

GA:User-ID 功能 設定及報表檢視

Forms Google

Google 表單,輸入 ID 後自動帶入其它欄位資料

Firebase Google

Firebase Authentication 第三方登入 – GitHub

API Front-End

WebSocket 基本介紹及使用筆記

Analytics Google

Google Analytics 用戶計時 / User Timings

PWA

PWA學習筆記-6:實際使用整體流程範例

WordPress

WordPress 基本介紹

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言