setup两种写法

//第一种 不管是方法还是数据，如果想要在外面使用，都必须return

<script>
     //setup开始执行，组件创建之前执行，比beforCreate执行的更早
     import { ref, reactive, watch, computed, onMounted } from 'vue';
     export default {
         setup(props, context){
         // 对于接受的props的数据，使用props去使用
         // 对于那些props不接收的数据，使用attrs接收(this.$attrs)  不支持响应式，如果想要支持响应式，必须使用props去接收
        console.log(context, context.attrs);
        
            console.log(this); // undefined
            
            let count = ref(100);  // 包装器，能够让count支持响应式  一般用来定义基本数据类型
            console.log(count.value);  // 获取数据必须加 .value
            
            let arr = reactive([]);  // 获取数据的时候不需要加 .value
            
            // 参数1：监听的数据   参数2：cb  监听的回调  参数3：监听配置项

            watch(count, (value, oldV) => {
                console.log(value, oldV);
            }, {
                immediate: true,  // 立即监听
                deep: true,  // 深度监听  对象
            })
            
            onMounted(() => {
            // dom挂载之后，才能拿到dom元素
            console.log('setup mounted');
            console.log(box.value);
            })
            
            
            // 如果想要在外面使用setup函数里面的数据，必须return
            return {
               // count: count
                  count,
                  c: count,
                  arr,   
                  box,
                  m,
            }
         }
     }
</script>

第二种 不需要export defult{} 不需要return

 <script>
      interface rolesListItem {
          aaa?:number;
          cat_deleted:boolean;
          cat_id:number|string;
          cat_level:number;
          cat_name:string;
          cat_pid:number;
          children:rolesListItem[];
      }
      
      import { ref, reactive, provide,onMounted } from 'vue';
      
       // let formatArr2 = computed(() => {
        //     return function(n) {  // 类似于vuex中getters
        //         return arr1.filter((item, index) => index >= n);
        //     };
  // })
  let formatArr2 = computed(() => (n) => arr1.filter((item, index) => index >= n))
      let addF = reactive({
          data: [],
      })
      
      let viewCategoriesF = () => {
    console.log("重新渲染了");
    viewCategories(viewCategoriesFP.pagenum, viewCategoriesFP.pagesize, viewCategoriesFP.type).then(res => {
        console.log(res);
        res.data.result.forEach((item:rolesListItem,index:number) => {
            item.aaa = index + 1;
        })
        addF.data1 = res.data.result;
    })
}

viewCategoriesF();
 </script>