1 前言
<h1>Hello, {name}</h1>，这种写法没问题；
<img src={src} alt="a image" />， 这种写法也没问题；
但类似“将变量绑定到同名属性上”这种操作是否有便捷写法呢？
2 正文
属性速记 是一种类似 ES6 对象赋值便捷方法的一种属性绑定便捷方法，看下代码就理解了：
<script>
const alt = "李雷的图片";
const src = "./avatar.png";
// const imgInfo = { alt: alt, src: src }; // 这是原始写法
// 强行演示对象属性修改的便捷写法，用于和“属性速记”做对比
const imgInfo = { alt, src };
</script>
<div>
{`这是${imgInfo.alt}: ${imgInfo.src}`}
<!-- 这是原始写法 -->
<!-- <img src="" /> -->
<!-- 属性速记形式绑定动态属性 -->
<img {src} {alt} />
</div>
3 总结
属性速记用在将变量绑定到同名属性上这一场景时，一切都是为了代码简洁。