Vue3的props需要注意的地方（简写与监视属性）

在工作中踩了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.tableContent
    watch(
      () => props.tableContent,
      (newValue, oldValue) => {
    
    
        console.log(newValue)
        state.tableForm.records = newValue.records
        state.tableForm.columns = newValue.columns
        console.log('tableForm', state.tableForm)
      }
    )

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

最后，欢迎关注！