技术解析
这是之前发布片段的地址: 码云代码片段
这个模块主要的功能是,可以获取父传入的 props,并且与本组件设定好的默认数据整合起来。
比方说我有个组件 Message。 我给 Message 设定了一个 prop,名为 options:
props: {
options: {
type: Object
}
}
我希望 options 的默认值是这样的:
options: {
icon: '',
name: '',
href: '',
onClick: () => {},
}
然后,我在父中传入值:
那么正常来说,在 Message 中获取 this.options,就会得到一个只有 name 属性的对象。 但我想要得到的 options 对象是这样的:
{
icon: '',
name: 'shook',
href: '',
onClick: () => {},
}
于是,这就是我写的这个文件的功能了… 使用的方法,就是引入到组件中:
import { propExtender } from '...xxx'
然后往 Message 组件的 computed 中加入一个名为 extender 的函数:
computed: {
extender () {
return propExtender.extender(this);
}
}
于是在组件内,就能通过 this.extender.options 拿到混合后的属性了。
但目前我遇到的问题是,这个功能获取的数据,在 prop 的值改变时,并不会触发 computed 的更新。
于是 extender 拿到的数据,永远只有第一次是准确的。
如果在那之后 prop 的值有所改变,这个 extender 都是获取不到变化的…十分弱鸡。
虽然放到 methods 中就能够去掉缓存这个特性,但我还是十分担心性能会出问题。所以想请大家帮忙看看该如何做才能够让 vue 检测到这个方法获取到的属性改变。