Vue项目数据动态过滤实践及实现思路


Posted in Javascript onSeptember 11, 2018

这个问题是在下在做一个Vue项目中遇到的实际场景,这里记录一下我遇到问题之后的思考和最后怎么解决的(老年程序员记性不好 -。-),过程中会涉及到一些Vue源码的概念比如 $mount 、 render watcher 等

问题是这样的:页面从后台拿到的数据是由 0 、 1 之类的key,而这个key代表的value比如 0-女 、 1-男 的对应关系是要从另外一个数据字典接口拿到的;类似于这样的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

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

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

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

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

5.同理,因为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) || val
   }
  },
  created() {
   // 把根组件中的filters响应式化
   Vue.util.defineReactive(this.$root.$options, 'filters', this.$root.$options.filters)
  },
  mounted() {
   registerFilters.call(this)
    .then(data =>
     // 这里获取到数据字典的data
    )
  }
 }
</script>

注册filter的js

// utils/filters
import * as Api from 'api'
/**
* 获取并注册过滤器
* 注册在$root.$options.filters上不是$root.$options.filters.__proto__上
* 注意这里的this是vue实例,需要用call或apply调用
* @returns {Promise}
*/
export function registerFilters() {
 return Api.sysParams()      // 获取数据字典的Api,返回的是promise
  .then(({ data }) => {
   Object.keys(data).forEach(T =>
    this.$set(this.$root.$options.filters, T, val => {
     const tar = data[T].find(item => item['paramValue'] === val)
     return tar['paramDesc'] || ''
    })
   )
   return data
  })
  .catch(err => console.error(err, ' in utils/filters.js'))
}

这样把根组件上的filters变为响应式化的,并且在渲染的时候因为在 rootFilters 方法中访问了已经在created中被响应式化的 $root.$options.filters ,所以当异步获取的数据被赋给 $root.$options.filters 的时候,会触发这个组件render watcher的重新渲染,这时候再获取 rootFilters 方法的时候就能取到filter了;

那这里为什么不用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>

这里不仅注册了过滤器,而且也暴露了数据字典,以方便某些地方的列表显示,毕竟这是实际项目中常见的场景。

参考:

  1. Vue.js 2.5.17 源码
  2. Vue 2.5.17 filter test

总结

以上所述是小编给大家介绍的Vue项目数据动态过滤实践,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 Javascript
js 小贴士一星期合集
Apr 07 Javascript
表单验证的完整应用案例探讨
Mar 29 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
js脚本分页代码分享(7种样式)
Aug 19 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
vue循环数组改变点击文字的颜色
Oct 14 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
使用vue.js在页面内组件监听scroll事件的方法
Sep 11 #Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 #Javascript
Webpack之tree-starking 解析
Sep 11 #Javascript
node.js之基础加密算法模块crypto详解
Sep 11 #Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 #Javascript
浅谈Webpack核心模块tapable解析
Sep 11 #Javascript
原生js检测页面加载完毕的实例
Sep 11 #Javascript
You might like
php并发加锁示例
2016/10/17 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
jquery中的$(document).ready()与window.onload的区别
2009/11/18 Javascript
Js event事件在IE、FF兼容性问题
2011/01/01 Javascript
Javascript的时间戳和php的时间戳转换注意事项
2013/04/12 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
JavaScript代码生成PDF文件的方法
2016/02/26 Javascript
快速解决js开发下拉框中blur与click冲突
2016/10/10 Javascript
NodeJS整合银联网关支付(DEMO)
2016/11/09 NodeJs
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
Vue 短信验证码组件开发详解
2017/02/14 Javascript
jQuery 获取除某指定对象外的其他对象 ( :not() 与.not())
2018/10/10 jQuery
JavaScript作用域链实例详解
2019/01/21 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
keep-alive保持组件状态的方法
2020/12/02 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
Python中字典的setdefault()方法教程
2017/02/07 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
python生成密码字典的方法
2018/07/06 Python
django 控制页面跳转的例子
2019/08/06 Python
基于python爬取有道翻译过程图解
2020/03/31 Python
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
如何写好优秀的创业计划书
2014/01/30 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
党员个人整改措施
2014/10/24 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
nginx配置之并发频次限制
2022/04/18 Servers