Ts 和 Vue 3笔记

学习笔记

简单类型
let num:number= 10
let str:string='asd'

数组:2种
let arr:string[]=[]    
let arr:Array<number>=[]

对象:2种
1、封装请求时
let obj={name:string,age:number}={
name:'jack',
age:20
}
2、通过接口
声明
interface obj{
	name:string,
	age:number
}
使用：let obj1:obj={
	name:'jack',
	age:12
}

定义函数：参数和返回值必须给类型

let fn=(num:number,num1:number):number=>{
return num1+num2
}
默认参数
let fn=(num:number,num1:number=20):number=>{
return num1+num2
}

剩余参数
三点运算符:接收传过来的值 ES6语法
function sum(...result:number[]):number{

}
调用 sum(1,2,3)	

ref 用来定义简单数据类型和获取dom的ref

    const num: Ref<number> = ref<number>(10);
    const dvRef = ref<HTMLDivElement | null>(null);

let computedAge:ComputedRef<number>=computed(()=>data.age+20)

挂载

    onMounted(() => {
      console.log(num.value);
    });

   watchEffect(() => {
      console.log(data.value);
    });

停止监听
	返回值是停止监听函数
    const stopwatchEffect = watchEffect(() => {
      console.log(data.value);
      if ((data.value === "1222222")) {
        stopwatchEffect();
      }
    });

watch

 	 //watch的第一个参数是箭头函数返回要监听的数据
   //第二个参数也是箭头函数，参数是val和oldVal
    watch(()=>data.value,(val,oldVal)=>{
        console.log(val,'新值')
        console.log(oldVal,'旧值')
    })

	可以有多个watch
	也可以写成一个
    watch(() => [data.age, data.value],(val, oldVal) => {
        console.log(val, "新值");
        console.log(oldVal, "旧值");
      }
    );

父组件给子组件传值

父组件给子组件传值用v-mode:data="data"

子组件修改父组件的值

    记得在return 中声明
    const update = (): void => {
      ctx.emit("update:data", "改变之后的值");
    };

引用
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";

声明
    const route = useRoute();
     const router = useRouter();
    const store = useStore();
使用
 同vue 2正常使用
 route.path
 router.push('/home')