您的位置:首页 > 教育 > 培训 > 中国vpswindows野外农民工_优化课程_网站优化种类_互联网公司排名100强

中国vpswindows野外农民工_优化课程_网站优化种类_互联网公司排名100强

2025/5/2 18:08:19 来源:https://blog.csdn.net/alicca/article/details/142940330  浏览:    关键词:中国vpswindows野外农民工_优化课程_网站优化种类_互联网公司排名100强
中国vpswindows野外农民工_优化课程_网站优化种类_互联网公司排名100强

目录

1 Ts里联合类型和交叉类型

type和interface编译后都消失了

interface 可以extends type,同时type也可以与interface类型交叉

class能够通过implements实现接口或类型别名,但是被认为是静态的,不能实现/扩展命名联合类型的类型别名

2 枚举类型 

3 父子组件生命周期钩子函数执行顺序

4 setup函数和script setup语法糖

5 rightreduce+reverse


1 Ts里联合类型和交叉类型

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)

type c = apple & {d:Number
}
let cc = {d:9,name:'circle',x:100
}
console.log(cc.d)

type和interface编译后都消失了

type apple=(name:string,id:number)=>void
type applepie = {name:string,id:numberapple:(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类型交叉

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开始,可以赋值

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函数了

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函数

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)

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com