Vue3.0 Composition Api Setup

Composition Api Setup

本章节使用单文件组件语法作为代码示例

本篇指南假定你已经阅读了Composition Api介绍和响应性基本原理，首次接触Composition Api之前应阅读它们。

参数

setup方法接受2个参数：

1. props
2. context 

接下来将深入了解每个参数各自的用法。

Props 

props是setup方法的第一个参数。就像你在标准的组件中所期待的那样，setup方法中的props是响应式的，并且在新的props被传递进来时将被更新。

// MyBook.vue

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}

 Warning

由于props是响应式的，你不能对它进行解构，否则它将失去响应性。

你可以在setup里面利用toRefs安全地解构你的props。

// MyBook.vue

import { toRefs } from 'vue'

setup(props) {
	const { title } = toRefs(props)

	console.log(title.value)
}

Context

context是被传递进setup方法的第二个参数。context是一个普通的JavaScript对象，它暴露了3个组件property：

// MyBook.vue

export default {
  setup(props, context) {
    // Attributes (Non-reactive object)
    console.log(context.attrs)

    // Slots (Non-reactive object)
    console.log(context.slots)

    // Emit Events (Method)
    console.log(context.emit)
  }
}

context是一个普通的JavaScript对象，也就是说，它不是响应式的，这意味着你可以安全地解构context。

// MyBook.vue
export default {
  setup(props, { attrs, slots, emit }) {
    ...
  }
}

attrs和slots都是有状态的对象，当组件自身更新时，它们也会更新。这意味着，你应该要避免解构它们，并且应当通过attrs.x或slots.x的方式引用property。并且要记住，与props不同，attrs与slots不是响应式的，如果你打算运用基于attrs或slots改变而产生的副作用，你应该在onUpdated的生命周期钩子中运用。

访问组件Property

当setup被执行时，组件实例还没被创建，此时你将只能访问到以下property：

1. props
2. attrs
3. slots
4. emit

也就是说，此时你无法访问到以下组件option：

1. data
2. computed
3. methods

与模板搭配的用法

若setup返回一个对象，那么在组件的模板中可以访问该对象的属性，同时也能够访问被传递进setup方法的props：

<!-- MyBook.vue -->
<template>
  <div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
</template>

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

  export default {
    props: {
      collectionName: String
    },
    setup(props) {
      const readersNumber = ref(0)
      const book = reactive({ title: 'Vue 3 Guide' })

      // expose to template
      return {
        readersNumber,
        book
      }
    }
  }
</script>

需要记住的是，被setup返回的refs在模板中会被自动展开，因此在模板中你无需使用.value。

与渲染函数搭配的用法

setup方法也可以返回一个渲染函数，这可以直接利用在相同作用域内声明的响应式状态：

// MyBook.vue

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

export default {
  setup() {
    const readersNumber = ref(0)
    const book = reactive({ title: 'Vue 3 Guide' })
    // Please note that we need to explicitly expose ref value here
    return () => h('div', [readersNumber.value, book.title])
  }
}

this的用法

在setup()里面，this并非当前活动实例的映射，因为setup()是在其他组件选项被解析之前调用的。this在setup()里面的行为与其他组件选项里面的相比，行为表现将大不相同。与其他选项api一起使用setup()时，这可能会引起混淆。