TS:可选链操作refimg.value?.src和非空断言refimg.value!.src

<script setup lang="ts">
import { ref } from 'vue'
const refimg = ref<HTMLImageElement | null>(null)
const clickMe1 = () => {
  // if (refimg.value) {
  //console.log(refimg.value.src)
  // }
  console.log(refimg.value && refimg.value.src)
  //可选链操作，可以让我们不需要确定每个属性是否真的有值，如果中间没有值，会返回真个表达式undefined
  console.log(refimg.value?.src)
  //非空断言，强制说明有数据，无赖，撒娇，使用魔法，欺骗说有数据慎用
  console.log(refimg.value!.src)
  //报错
  console.log(refimg.value.src)
}
</script>
<template>
  <h1>可选链操作符</h1>
  <el-button @click="clickMe1">点击</el-button>
  <img style="width: 200px; height: 200px" ref="refimg" src="../assets/logo.svg" alt="" />
</template>
<style scoped></style>
ift