Vue项目数据动态过滤的完成方法

类似于这样的Api：

{
  "SEX_TYPE": [
    { "paramValue": 0, "paramDesc": "女" },
    { "paramValue": 1, "paramDesc": "男" }
  ]
}

那么如果view拿到的是0，就要从字典中找到它的描述女并且显示出来；下面故事开始了

1. 思考

有人说，这不是过滤器 filter 要做的事么，直接Vue.filter不就行了。

然而问题是这个filter是要等待异步的数据字典接口返回之后才能拿到，如果在$mount的时候这个filter没有找到。

那么就会导致错误影响之后的渲染(白屏并报undefined错)；

我想到的解决方法有两个：

• 把接口变为同步，在beforeCreate或created钩子中同步地获取数据字典接口，保证在 $mount的时候可以拿到注册好的 filter，保证时序，但是这样会阻塞挂载，延长白屏时间，因此不推介；

• 把filter的注册变为异步，在获取filter之后通知 render watcher 更新自己，这样可以利用vue自己的响应式化更新视图，不会阻塞渲染，因此在下初步采用了这个方法。

2. 实现

因为filter属于 asset_types ，关于在Vue实例中asset_types的访问链有以下几个结论；

具体代码实践可以参考： Codepen - filter test

• asset_types包括filters、components、directives，以下所有的asset_types都自行替换成前面几项

• 子组件中的asset_types访问不到父组件中的asset_types，但是可以访问到全局注册的挂载在$root.$options.asset_types.__proto__上的asset_types，这里对应源码 src/core/util/options.js

• 全局注册方法Vue.asset_types，比如Vue.filters注册的asset_types会挂载到根实例(其他实例的$root)的$options.asset_types.__proto__上，并被以后所有创建的Vue实例继承，也就是说，以后所有创建的Vue实例都可以访问到

• 组件的slot的作用域仅限于它被定义的地方，也就是它被定义的组件中，访问不到父组件的asset_types，但是可以访问到全局定义的asset_types

• 同理，因为main.js中的new Vue()实例是根实例，它中注册的asset_types会被挂载在$root.$options.asset_types上而不是$root.$options.asset_types.__proto__上

根据以上几个结论，可以着手coding了~

2.1 使用根组件的filters
因此首先我考虑的是把要注册的filter挂载到根组件上，这样其他组件通过访问$root可以拿到注册的filter。

这里的实现：

<template>
  <div>
    {{ rootFilters( sexVal )}}
  </div>
</template>

<script type='text/javascript'>
  import Vue from 'vue'
  import { registerFilters } from 'utils/filters'

  export default {
    data() {
      return {
        sexVal: 1  // 性别
      }
    },
    methods: {
      /* 根组件上的过滤器 */
      rootFilters(val, id = 'SEX_TYPE') {
        const mth = this.$root.$options.filters[id]
        return mth && mth(val)   
关键词：Vue项目数据动态过滤的完成办法