疯狂的 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" 在每次页面更新时都会被打印.