技术解析

给 Vue 写了个继承 props 的模块,但放入 computed 中检测不到数据变化
0
2021-09-02 05:28:30
idczone

这是之前发布片段的地址: 码云代码片段

这个模块主要的功能是,可以获取父传入的 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 检测到这个方法获取到的属性改变。


直接给这个 prop 设置一个 default 默认值不就好了吗

return propExtender.extender(this);
-- 这里面 3 个依赖 propExtender,extender() 和 this 都没变化,不会触发刷新。

粗暴点直接 return {
icon: '',
name: '',
href: '',
onClick: () => {},
...this.options
}

在 watch 函数里面,用$emit 通知

如果 prop 的属性是复杂类型,简单地设置 default 不能达到想要的效果
我现在尝试给 extender 函数加入了一个形参,算是笨拙地解决了这个问题…
原本:extender (self) { ... }

接上条
原本:extender (self) { ... }
解决办法:extender (self, originProps) { ... }
也就是说使用的时候需要这样做了:return propExtender.extender(this, this.$props);

嗯嗯, 但是我觉得你这样好麻烦, 还不如直接把 options 的属性都拆开来写, 不要放在一个对象

已经解决了你的问题。

数据地带为您的网站提供全球顶级IDC资源
在线咨询
专属客服