vue3+setup使用知识点

<script lang="ts" setup>
import {getCoupon} from './request';//request里面包含接口,此处是引入getCoupon这个接口
import { onMounted, reactive, ref, getCurrentInstance, onActivated } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();//获取路由参数
const router = useRouter();//获取路由对象
const emit = defineEmits(['downStep']);//初始化emit调用的方法
const props = defineProps({//初始化prop内部参数
	id:Number,
	leave:{
		type:String,//类型
		default:'一级'//默认参数
	}
});

let name = ref('');//ref初始化普通参数
let obj1 = reactive({//ref初始化复杂对象参数
      name: "老王",
      age: "50",
      test: {
        salary: 3000,
        year: 1,
      },
    });
let obj2 = ref({//ref也可初始化复杂对象参数
      name: "老王",
      age: "50",
      test: {
        salary: 3000,
        year: 1,
      },
    }); 
//ref与reactive都可初始化复杂对象参数，但是使用上不同
console.log(obj1.name);
console.log(obj2.value.name);   
console.log(name.value);//ref使用需要.value,reactive则不用      
watch(name, (newVal, oldValue) => {//监听单个基本数据类型(ref)
     console.log(newVal, oldValue);
 });    
const getList = async (a)=>{//async函数
	let data = await getCoupon({a});
};
const getBtnClick =()=>{//普通函数
	emit('downStep',1);//对比vue2中的this.$emit
	console.log(props.id);//使用props中的id
}
const back = ()=>{
	//router.push("/aa");//跳转其他页面
	router.push({url:'/aa',query:{name:'测试'}});//带参跳转
	//router.replace("/aa")//
}

onMounted(() => {//页面初始化时只请求一次
 //初始化生命周期，一般初始化参数请求时将获取数据接口写在此处
 let a = route.query.a;//获取跳转页面时传递的参数a
 getList(a); 
});
onActivated(() => {//页面每次进入时都请求一次，当使用keep-alive并且每次进入页面都需调用一次时使用
 let a = route.query.a;//获取跳转页面时传递的参数a
 getList(a); 
});
</script>