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，這樣比照之下，確實看比較懂。

二部影片的連結在這：

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

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：

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

msg.value = 'Hello Lets write'

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

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

對，真的可以像 Vue 2 的 ref 一樣來用：

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

最後影片中有說明了一大串 ref、reactive 的分別，後來是 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 我們會寫 created、mounted 一樣，Composition API 也可以寫在每個生命週期內要執行的動作。

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

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

Summary

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 檔裡，就不用每次都重複寫。

August

Augustus

Let's Write

Let's Write

https://letswritetw.github.io/letswritetw/dist/img/logo_512.png