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