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

Vue.js 3 Composition API 基本學習筆記
Vue.js 3 Composition API 基本學習筆記

本篇要解決的問題

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
訂閱
通知
guest

0 Comments
Inline Feedbacks
看所有留言