Ts里联合类型和交叉类型,枚举类型,父子组件生命周期钩子函数执行顺序,setup函数和script setup语法糖,rightreduce+reverse

[1 Ts里联合类型和交叉类型](#1 Ts里联合类型和交叉类型)

type和interface编译后都消失了

[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)