TypeScript与Vue组合开发记录点(八)
TypeScript中的!特殊用法
!表示非空断言符号,即忽略数据的null和undefined类型,例如:
// 在调用A中的B变量时,避免因为A是null或者undefined而出现报错
// 另外,调用变量时,一定要注意变量名是否定义了。
A!.B
TypeScript中的?.特殊用法
?.表示当遇到 null 或 undefined 就可以立即停止某些表达式的运行。当使用A对象属性A.B时,如果无法确定A或B是否为空,则需要用?.
// 表示当A,B有值的时候才去访问B属性,没有值的时候就不去访问,如果不使用?.则会报错
A?.B
A?.B可以类似于A&&B的意思。
TypeScript中的??特殊用法
??为空值合并运算符,当左侧操作数为 null 或 undefined 时,其返回右侧的操作数,否则返回左侧的操作数。
// 先设定data1的值为null或者undefined
const data1=null|undefined
const data2 = data1 ?? 100
console.log(data2)
// 此时data2的值输出为100
@watch()监视属性
监视属性中的immediate函数
表示当未触发修改值的事件时,数值未变化时,只有一个值,未产生旧值。
// 此时的打印输出新值和旧值,会出现{value,undefined},解释为未产生旧值
immediate:true
console.log(newValue,oldValue)
handler函数与(newValue,oldValue)
在watch监视函数内部,js中可以通过另一个函数handler函数同时监视新值newValue和旧值oldValue。Ts中可以使用自定义函数同时监视新值newVal和旧值oldValue。
// js中的handle函数
handler(newValue, oldValue) {
//在控制台显示,当ishot切换一次值,就输出一次下边这句话
console.log('ishot被修改了', newValue, oldValue);
}
// ts中的自定义函数
onOuterValueChange(newValue: any, oldValue: any) {
console.log(‘新值和旧值’,newValue,oldValue)}