那这里为什么不用Vue.filter方法直接注册呢，因为 Object.defineProperty 不能监听 __proto__ 上数据的变动，而全局Vue.filter是将过滤器注册在了根组件 $root.$options.asset_types.__proto__ 上，因此其变动不能被响应。
这里的代码可以进一步完善，但是这个方法存在一定的问题，首先这里使用了 Vue.util 上不稳定的方法，另外在使用中到处可见 this.$root.$options 这样访问vue实例内部属性的情况，不太文明，读起来也让人困惑。
因此在这个项目做完等待测试的时候我思考了一下，谁说过滤器就一定放在filters里面 -。-，也可以使用mixin来实现嘛
2.2 使用mixin
使用mixin要注意一点，因为vue中把data里所有以 _ 、 $ 开头的变量都作为内部保留的变量， 上 ，因此直接 this._xx 是无法访问的，需要通过 this.$data._xx 来访问。
// mixins/sysParamsMixin.js import * as Api from 'api' export default { data() { return { _filterFunc: null, // 过滤器函数 _sysParams: null, // 获取数据字典 _sysParamsPromise: null // 获取sysParams之后返回的Promise } }, methods: { /* 注册过滤器到_filterFunc中 */ _getSysParamsFunc() { const thisPromise = this.$data._sysParamsPromise return thisPromise || Api.sysParams() // 获取数据字典的Api，返回的是promise .then(({ data }) => { this.$data._filterFunc = {} Object.keys(data).forEach(paramKey => this.$data._filterFunc[paramKey] = val => { // 过滤器注册到_filterFunc中 const tar = data[paramKey].find(item => item['paramValue'] === val) return tar['paramDesc'] || '' }) return data }) .catch(err => console.error(err, ' in src/mixins/sysParamsMixin.js')) }, /* 按照键值获取单个过滤器 */ _rootFilters(val, id = 'SEX_TYPE') { const func = this.$data._filterFunc const mth = func && func[id] return mth && mth(val) || val }, /* 获取数据字典 */ _getSysParams() { return this.$data._sysParams } }, mounted() { this.$data._filterFunc || (this.$data._sysParamsPromise = this._getSysParamsFunc()) } }
这里把 Api 的promise保存下来，如果其他地方还用到的话直接返回已经是 resolved 状态的promise，就不用再次去请求数据了。
那在我们的组件中怎么使用呢：
<template> <div> {{ _rootFilters( sexVal )}} </div> </template> <script type='text/javascript'> import * as Api from 'api' import sysParamsMixin from 'mixins/sysParamsMixin' export default { mixins: [sysParamsMixin], data() { return { sexVal: 1 } }, mounted() { this._getSysParamsFunc() .then(data => // 这里获取到数据字典的data ) } } </script>
这里不仅注册了过滤器，而且也暴露了数据字典，以方便某些地方的列表显示，毕竟这是实际项目中常见的场景。
参考：
总结
以上所述是小编给大家介绍的Vue项目数据动态过滤实践，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: