瘋狂的 Vue3 之 Setup

看了俺之的上一篇文章, 很多同事一天就學會了如何用 vue3 寫一個簡單的頁面, 紛紛開始在公司的專案裡胡來. 很快遇到了問題:

之前我們定義的是一個簡單的渲染函式, 每當元件需要重新渲染的時候, 它就會被呼叫. 那麼如何去做一些初始設定呢? 這些設定應當只在元件首次載入的時候執行.

Vue3 早已為我們考慮到了, 只需要一個小小的 setup 就可以達到這種目的, 讓我們來看看程式碼:

import { h, createApp, reactive } from 'vue'

const app = {
  setup: (props, ctx) => {
    console.log('setup')
    const model = reactive({ count: 0 })

    setInterval(() => model.count += 1, 500)

    return () => {
      console.log('render')
      return h('div', model.count)
    }
  }
}

createApp(app)
  .mount('#app')

可以看到 "setup" 只被列印了一次, 而 "render" 在每次頁面更新時都會被列印.