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