本篇讲解Vue3.x Vue Composition API 中 setup函数特性.
setup函数是Vue Composition API的入口. 即Composition API 均需在setup中使用.

setup(props, context)组件选项

setup是新的组件选项,它是Composition API的入口.

调用时间

在创建组件实例时，在初始组件解析之后调用setup。在生命周期方面，它在beforeCreate钩子之前调用

使用的模板

如果设置返回一个对象，对象上的属性将会合并到组件模板的呈现上下文中

<template>
  <div>{{ count }} {{ object.foo }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    setup() {
      const count = ref(0)
      const object = reactive({ foo: 'bar' })

      // expose to template
      return {
        count,
        object
      }
    }
  }
</script>

使用渲染函数 JXS

setup也可以返回一个render函数，它可以直接利用在相同范围内声明的反应状态:

import { h, ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const object = reactive({ foo: 'bar' })

    return () => h('div', [count.value, object.foo])
  }
}

Arguments

该函数接收到的第一个参数是props, 第二个参数为context

props: 组件声明props
context (Object)
1. attrs
2. emit
3. slots

1.props

props对象是响应式的(reactive), 当传入的新的props对象时会对其进行更新,并且可以通过watchEffect或watch监听改变.

props对象不支持解构,解构会导致失去响应性：

export default {
  props: {
    name: String
  },
  setup({ name }) {
    watchEffect(() => {
      console.log(`name is: ` + name) // Will not be reactive!
    })
  }
}

在开发过程中，props对象对于用户域代码是不可变的(如果用户代码试图修改它，它会发出警告)。

2.context

第二个参数提供了一个上下文对象, 相当于vue2.x中this,但却仅包含attrs、slots、emit## 二级标题

const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.emit
  }
}

attrs和slot是内部组件实例上对应值的代理。这确保了即使在更新之后，它们也总是公开最新的值，这样我们就可以对它们进行重构，而不用担心访问陈旧的引用

注意: setup执行期间尚未创建组件实例,因此setup内this=undefined

[Vue3.x]Vue Composition API 之 setup函数