19.混合使用选项和组合API需要注意哪些

在 Vue3中，我们可以混合使用选项 API 和组合API，不过需要注意几点：

首先，不能在 setup 函数中访问 选项API中声明的属性。

啥意思呢，我们来看个例子，假设我们有一个 User 组件：

// User.vue
<template>
  <div>child 组件</div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        name: '王大冶',
      },
    }
  },
  setup() {
    console.log(this.userInfo.name)
  },
}
</script>

在 User 组件中，我们声明一个 userInfo 对象，然后在 setup 我们打印 UserInfo.name 的值，如果运行，控制会报错，如下所示：

这里因为，在 setup 函数中， 我们不能访问选项 API 中的属性，也不能使用 this。

第二，可以在 选项API 中访问从 setup 中返回的属性。