环境:uniapp、vue3、vant-weapp
<template>
<van-field :value="content"></van-field>
<view>{{content}}</view>
</template>
修改content,但van-field并没有跟着发生变化,而下面的{{content}}
变化了。这可能是vant-weapp本身的问题。
查看源码后发现,van-field的value prop observer在value变化的时候没有触发。
查阅一番资料知道,observer是在每次setData()执行后才触发。但是,uniapp中没有setData(),只能使用vue3的方式更新data。那怎么办,难道uniapp在开发的时候没有考虑到这一点吗?
那我自己写一个小程序组件试试?于是我写了一个自定义的小程序组件。
<!--my-field.wxml-->
<text>{{value}}</text>
// my-field.js
Component({
properties: {
value: {
type: String,
observer(value) {
console.log('my-field value changed:', value);
},
}
},
})
<template>
<my-field :value="content"></my-field>
</template>
改变content,发现my-field的valur prop observer执行了。那问题就锁定到vant-weapp本身了。
接着尝试换vant-weapp版本、vant-weapp安装方式、在wxcomponents下的命名,都没法找到问题。
于是我想,其他vant组件是否也存在同样问题?我用van-button的size prop试了一下,发现van-button的size prop的observer能够成功执行。
那问题就继续锁定到van-field本身了。
对比van-field和van-button两者的代码,发现van-field中多了一行filed:true
。我尝试去掉看看,发现van-field的value prop observer终于执行了!
这个field:value
的意义是什么?看不懂。可能是开发者挖的坑吧。