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，必须在它参数的第 1 个位置提供 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>
  

• 在 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>