关于前端:疯狂的-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” 在每次页面更新时都会被打印.