vue3之setup的使用理解

1、vue3中的setup有什么用
setup的设计是为了使用组合式api

2、为什么不用之前的组件的选项
data、computed、methods、watch 组织逻辑在大多数情况下都有效。然而，当我们的组件变得更大时，逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解，尤其是对于那些一开始就没有编写这些组件的人来说。而通过setup可以将该部分抽离成函数,让其他开发者就不用关心该部分逻辑了.

3、setup的在vue生命周期的位置
setup位于created 和beforeCreated之前,用于代替created 和beforeCreated,但是在setup函数里不能访问到this,另外setup内可以通过以下hook操作整个生命周期
onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted,onErrorCaptured,onRenderTracked,onRenderTriggered

4、setup可以接收哪些参数
setup可接受props,context,其中props由于是响应式数据,不能直接解构赋值,context不是响应式数据,可以直接解构赋值;setup必须返回一个对象,一旦return,就可以像vue2.x的方式使用该属性

props:['test']
setup(props,context){
//const {test} = props //错
const {test} = toRefs(props) //对
const { attrs, slots, emit }= context //对
  return {
    test
  }
}

5、优先级,如果data,props,setup都有一个同名属性,setup返回的该属性优先级最高,以执行以下代码为例,将显示:test from son's setup

//father.vue
...
<custField :test="test" />
setup(){
  const test = ref('test from father')
  return{
    test
  }
}
...

//son.vue
<template>
  <div class="custField">
    优先级测试
    <h1>{
  { test }}</h1>
  </div>
</template>

<script>
import { toRefs } from "vue";
export default {
  props: ["test"],
  data() {
    return {
      test: "test from son's data",
    };
  },
  setup(props) {
    let test = toRefs(props);
    test = "test from son's setup";
    return { test };
  },
};
</script>

6、如上代码所示,若要在setup内执行ref,toRefs,toRef,computed,watch,watchEffect等函数,需先引入

import {