uniapp遇到的问题

1.uniapp u-popup弹窗内嵌from表单组件时报错，规则找不到

<u-popup mode="center" v-model="show">
        
        <view class="" style="padding: 30upx;">
            <u-form :model="form" ref="uForm" >
                <u-form-item label="姓名" prop="name" >
                 <u--input v-model="uForm.name" border="none" placeholder="用户名"></u--input>
                </u-form-item>
            </u-form>
            <view class="" style="display: flex;">
                <u-button size="mini" @click="submit">提交</u-button>
                <u-button size="mini" style="margin-left: 20upx;" @click="resetSubmit">取消</u-button>
            </view>
        </view>
        
    </u-popup>

规则：

show :false,
form :{},
rules:{
            name: [
                { 
                    required: true, 
                    message: '请输入姓名',  
                    trigger: ['change'],
                }
            ],
        },

如上面的代码所示，弹窗内嵌套了一个表单组件，这个时候如果根据官方文档去写 在 onReady 加载表单规则，就会报错提示 找不到表单组件，加载不了。

也就是  Cannot read properties of undefined (reading 'setRules')  

打印 this.$refs.uForm 会出现 undefined，如下图所示

这个时候只需要写一个watch 监听 u-popup 加载速度即可 

watch:{
        // this.$refs.uForm.setRules(this.rules);
        show:{
            handler(value){
                this.$nextTick(()=>{ //在弹窗加载出来只有 show 才会变成 true
                    if( value == true ){ //判断 弹窗 v-model 变成 true 的时候去加载规则。 原理：在弹窗渲染完成之后表单渲染完成之前去加载规则就不会报错了
                        this.$refs.uForm.setRules(this.rules);
                    }
                })
            },
        },
        immediate: true, // 重点
        deep: true, // 重点
    },

2、在使用uniapp中需要修改data中的值，但是页面没有发生变化

原因：数据层次太多，没有触发render函数进行自动更新

解决方法：需手动调用，调用方式如下
this.$forceUpdate();

//需要修改的值
data() {
	return {
		data:{},
	};
},

//改代码如下：
this.data.a2 = "hello";
this.$forceUpdate();