Vue3 监听属性
Vue3 监听属性（Attribute Binding）是一种通常用于绑定 HTML 元素标签的属性（attribute）和 Vue 实例数据的机制。Vue 实例数据（data）变化时，其绑定的 HTML 属性也会相应地更新。Vue3 监听属性与 Vue2.x 的v-bind指令功能类似，但有所不同。
Vue3 监听属性的使用方式为用冒号（：）或v-bind指令指定 HTML 元素标签的属性名，并将其绑定到 Vue 实例的数据上。例如：
<template>
<div>
<!-- 将 message 属性绑定到 <p> 元素标签的一种方式 -->
<p :title="message">{{ message }}</p>
<!-- 将 message 属性绑定到 <p> 元素标签的另一种方式 -->
<p v-bind:title="message">{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, world!'
}
}
}
</script>
在本例中，我们将 message 属性与 p 元素标签的 title 属性绑定。随着 Vue 实例中 message 数据的变化，p 元素标签的 title 属性也会作出相应的更新。
在 Vue3 中，我们也可以使用属性缩写的方式进行监听属性的绑定。例如：
<template>
<div>
<!-- 使用属性缩写方式将 message 属性绑定到 <p> 元素标签的 title 属性上 -->
<p :title="message">{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, world!'
}
}
}
</script>
在使用属性缩写的情况下，省略了 v-bind 指令名称，而将监听属性的绑定写在了冒号（:）后面。
需要注意的是，在 Vue3 中，我们不能使用双花括号（{{ }}）直接在 HTML 元素标签中插值绑定数据，而是需要使用通过监听属性将其绑定到 HTML 元素标签的属性上。例如：
<!-- 这种使用方式是错误的 -->
<p>{{ message }}</p>
<!-- 需要使用监听属性将 message 绑定到 p 元素标签的 innerText 属性上 -->
<p :innerText="message"></p>
总结：
Vue3 监听属性是一种实现将 Vue 实例数据绑定到 HTML 元素标签属性的机制。在 Vue3 中，我们可以使用冒号（:）、v-bind 指令、属性缩写等方式进行监听属性的绑定。通过监听属性，我们可以在 Vue 实例数据发生变化时，将其同步更新到 HTML 元素标签的属性上，实现动态更新视图的目的。