Vue3 Setup函数详解

setUp 函数的作用就是为 Composition API 在组件中使用提供入口。意思就是你要使用 Composition API，在组件中必须提供 setUp 函数。

setUp 函数使用方式如下

<template>
  <div>
    <button @click="increment">
      {{target.name}} tapped {{times}} times
    </button>
  </div>
</template>

<script>
  import { createComponent, ref, reactive } from '@vue/composition-api'

  export default createComponent({
    // 组件被创建时setUp函数被调用
    setup() {
      let times = ref(0)
      let target = reactive({
        name: 'Button'
      })

      const increment = () => {
        times.value++
      }

      //把属性暴露给template
      return {
        times,
        target,
        increment
      }
    }
  })
</script>

setup(props, context) 的参数

props 对象

<script>
  import { createComponent } from '@vue/composition-api'

  export default createComponent({
    props: {
      greet: {
        type: String,
        default: 'Hello Vue3!'
      }
    },

    setup(props) {
      console.log(props.greet) //输出 'Hello Vue3!'
    }
  })
</script>

context 对象

• 在 composition API 里不再提供 this，而是换成了 context 对象，里面包含了在 2.x APIs 的 this 所拥有的属性，它被作为 setUp 的第二个参数。

<script>
  import { createComponent } from '@vue/composition-api'

  export default createComponent({
    setup(props, context) {
      context.attrs
      context.slots
      context.parent
      context.root
      context.emit
    }
  })
</script>

• 实际案例如下：

<script>
  import { createComponent } from '@vue/composition-api'

  export default createComponent({
    setup(props, context) {
      context.root.$on('test', function(msg) {
        console.log(msg) // 'hi'
      })
      context.root.$emit('test', 'hi')
    }
  })
</script>