组合式API- 1－Setup

#参数

使用 setup 函数时，它将接受两个参数：

1. props

2. context

#第一个参数-Props

setup 函数中的第一个参数是 props。正如在一个标准组件中所期望的那样，setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。

// MyBook.vue

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

WARNING 

但是，因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性。

使用 setup 函数中的 toRefs 来安全地完成此操作

const { title } = toRefs(props)

vue3中ref、toRef、toRefs的区别

toRefs——>可以看作toRef的语法糖,toRefs会遍历传入对象的属性。

ref——>原有数据的复制，修改数据不会影响原数据但UI界面会更新。

toRef——>原有数据的引用，修改数据影响原数据但UI界面不更新

 第二个参数是 context

context 是一个普通的 JavaScript 对象，它暴露三个组件的 property：

export default {
  setup(props, context) {
    // Attribute (非响应式对象)
    console.log(context.attrs)

    // 插槽 (非响应式对象)
    console.log(context.slots)

    // 触发事件 (方法)
    console.log(context.emit)
  }
}

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

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

 访问组件的 property

                     因为组件实例尚未被创建

不可访问	可访问
data computed methods	props attrs slots emit

 结合模板使用

<template>
  <div>{{ readersNumber }} {{ book.title }}</div>
</template>

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

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

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

	ref	reactive
不同点	用于基本数据类型	用于复杂数据类型，比如对象和数组
相同点	将数据变成响应式数据，当数据发生变化时UI也会自动更新

使用 this

在 setup() 内部，this 不会是该活跃实例的引用，因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同。这在和其它选项式 API 一起使用 setup() 时可能会导致混淆。