在工作中踩了props的坑，总结一下：

1.props是可以在模板语法中简写的。就好比，toRefs了一下state。我们没必要在模板语法中加上props.xxx；

2.有时我们需要监视props的内容，可以用到监视属性watch。我们可以先复习一下watch在Vue3的用法：

<template><div>学校名称: {{ school }}</div><button @click="school = '家里蹲大学'">修改学校名称</button>
</template><script>
import {ref, reactive, watch} from 'vue'
export default {name: 'App',setup() {let school = ref('湖北师范大学')watch(school, (newValue, oldValue) => {console.log('school被修改');console.log(school)})return {school}}
}
</script>

具体也可以见一下这篇博客：Vue3中watch的value问题

唯独监视props的时候格式不太一样

取一段代码：

   // 监视属性，监视props.tableContentwatch(() => props.tableContent,(newValue, oldValue) => {console.log(newValue)state.tableForm.records = newValue.recordsstate.tableForm.columns = newValue.columnsconsole.log('tableForm', state.tableForm)})

需要以这样的格式书写才可以正常响应。

最后，欢迎关注！