setup注意点：

 setup的使用：

1.setup 函数时，它将接受两个参数：（props、context(包含attrs、slots、emit)）

context包含三个参数，可通过解构方式写
context该上下文对象是非响应式的，可以安全地解构：
 
export default {
  setup(props, { attrs, slots, emit, expose }) {
    // Attribute（非响应式的对象，等价于 $attrs）
    console.log(attrs)
 
    // 插槽（非响应式的对象，等价于 $slots）
    console.log(slots)
 
    // 触发事件（函数，等价于 $emit）
    console.log(emit)
 
    // 暴露公共 property（函数）
    console.log(expose)
  }
}

2.setup函数执行时机是在beforeCreated和created两个周期函数之前

3.setup里面没有vue实例，故想通过this访问会是undefined，即第一张图提示文字所述

4.setup函数中所定义的所有变量和方法，谨记要return出去，否则在vue文件（模板）中无法使用

5.在渲染函数中可以直接使用在同一作用域下声明的响应式状态：

import { h, ref } from 'vue'
 
export default {
  setup() {
    const count = ref(0)
    return () => h('div', count.value)
  }
}
 
// 直接使用count.vue的方式

6.子组件组件内部的方法想暴露给父组件通过ref方式去获取使用，通过expose方法即可

import {  ref } from 'vue'
 
export default {
  setup(props, { expose }) {
    const num= ref(0)
    const count = ref(0)
    const increment = () => ++count.value
    expose({
      count,
      increment
    })
  }
}
父组件： <child ref='childCom'></child>
调用：   this.$refs.childCom.increment  // 成功，可以获取到对应方法
调用：   this.$refs.childCom.count      // 成功，可以获取到对应值
调用：   this.$refs.childCom.num        // 失败，不可以获取到对应值
expose未导出的属性，父组件中调用就会是undefined，即未暴露的属性或方法父组件是拿不到的！！！

再次强调下：

1.setup函数中不能使用this，即此时为包含vue实例，打印即为undefined

2.setup函数中props入参是响应式的，不能通过解构来使用，否则会丢失响应式，想解构在函数内部通过toRefs来使用

import { toRefs, toRef } from 'vue'
export default {
  setup(props) {
    // 将 `props` 转为一个其中全是 ref 的对象，然后解构
    const { title } = toRefs(props)
    // `title` 是一个追踪着 `props.title` 的 ref
    console.log(title.value)
 
    // 或者，将 `props` 的单个 property 转为一个 ref
    const title = toRef(props, 'title')
  }
}    

 3.setup函数中使用的响应式数据，要通过对应变量.value获取

import { ref } from 'vue'
 
const count = ref(0)
console.log(count.value) // 0

4.setup函数return后的属性，在模板中不用使用.value,直接使用变量名即可（它会自动暴露值）

5.setup函数不能是异步的，只能为同步函数！！！