目录
[1 Ts里联合类型和交叉类型](#1 Ts里联合类型和交叉类型)
[interface 可以extends type,同时type也可以与interface类型交叉](#interface 可以extends type,同时type也可以与interface类型交叉)
class能够通过implements实现接口或类型别名,但是被认为是静态的,不能实现/扩展命名联合类型的类型别名
[2 枚举类型](#2 枚举类型)
[3 父子组件生命周期钩子函数执行顺序](#3 父子组件生命周期钩子函数执行顺序)
[4 setup函数和script setup语法糖](#4 setup函数和script setup语法糖)
[5 rightreduce+reverse](#5 rightreduce+reverse)
1 Ts里联合类型和交叉类型
TypeScript
type num = number
let pine:num=1
type apple = {name:'circle',x:Number} | {name:'square',x:Number,y:Number}
function getcircle(param:apple):num{
if(param.name==='circle') {
return Math.PI*param.x*param.x
} else if(param.name==='square') {
return param.x*param.y
}
}
let app = {
name:'circle',
x:8
}
console.log(getcircle(app)*pine)
联合类型:如果用在原始类型上 取任意一种;用的更多的是作为别名的方式,不是创建新类型,创建别名来引用之前的类型
交叉类型:用在复杂类型上取所有类型的并集(type a = c &{}相当于继承自c)
TypeScript
type c = apple & {
d:Number
}
let cc = {
d:9,
name:'circle',
x:100
}
console.log(cc.d)
type和interface编译后都消失了
TypeScript
type apple=(name:string,id:number)=>void
type applepie = {
name:string,
id:number
apple:(name:string,id:number)=>void
}
interface water{
(name:string,id:number):void
}
let c:water = function(name,id) {
console.log('water')
}
interface 可以extends type,同时type也可以与interface类型交叉
TypeScript
type apple= {
str:string
}
interface app extends apple {
num:number
}
let app1:app = {
num:9,
str:'aaa'
}
type applepie = app & {
bo:boolean
}
let applepie1:applepie ={
bo:false,
num:9,
str:'aaa'
}
class能够通过implements实现接口或类型别名,但是被认为是静态的,不能实现/扩展命名联合类型的类型别名
2 枚举类型
默认数字类型枚举 可以将数字类型赋值给枚举类型的实例
默认枚举值从0开始,可以赋值
TypeScript
enum color {
red,
green,
blue
}
let ins = color.red//0
ins=2
console.log(color.red,ins)//0, 2
//默认枚举值从0开始,但是可以赋值
enum colorr {
red,
green=3,
blue
}
console.log(colorr.red,colorr.blue,colorr.green)//0 4 3
3 父子组件生命周期钩子函数执行顺序
Vue 3引入了新的组件选项 setup ,替代了Vue 2中的 beforeCreate 和 created
父组件:onbeforemount-》子组件onbeforemount-〉子组件onmounted-》父组件onmounted
父组件更新:onbeforeupdate-〉子组件onbeforeupdate-》子组件onupdated-〉父组件onupdated
子组件更新:子组件onbeforeupdate-》子组件onupdated
父组件销毁时,执行顺序:onbeforeunmount-〉子组件onbeforeunmount-》子组件unmounted-〉unmounted
由于要从父组件给子组件传递props,所以需要在父组件的beforeMount或beforeMount阶段发起数据请求,子组件中要对props做简单判断再使用,因为在渲染阶段可能会拿到非法的值
想访问父组件实例(getCurrentInstance().parent)访问父组件实例(相当于选项式 API 中的 this ?)
4 setup函数和script setup语法糖
setup函数是组合式api的入口,需要将定义的方法和属性都return出去 这个函数在export default里面,第一个参数是props第二个参数是context
在实例创建之前,但是在props解析之后
script setup语法糖
所有方法和属性都自动暴露给模版,不要components注册了只要引用就能自动获得,包括自定义指令
emits和props变成引用defineemits和defineprops
调用在beforecreate之前
不要写export default和setup函数了
javascript
let a=[2,3]
function set(a) {
a.push(4)
a=[...a,5]
console.log(a)//2,3,4,5
}
set(a)
console.log(a)//2,3,4
a = [...a, 4];
:这行代码创建了一个新数组,包含当前 a
中的所有元素(即 [1, 2, 3]
)和 4
。但是,这个操作仅改变了函数内部参数 a
的引用,不会影响外部的 a
。函数内部 a
现在指向一个新的数组 [1, 2, 3, 4]
。
5 rightreduce+reverse
将reduce的功能里累积值和当前值的使用反过来并实现reverse函数
javascript
function rightreduce(arr,func,ini) {
for(let i=0;i<arr.length;i++) {
ini = func.call(arr,arr[i],ini,arr);
}
return ini
}
let c= rightreduce([1,2],(cur,pre)=>[cur,...pre],[])
console.log(c)