在前后端分离的开发模式下，前端所需要的数据支持需要从后端请求获得，但请求来的原始数据通常都是无法直接使用的，甚至有可能引发代码报错，例如时间可能是以时间戳形式传过来的，或者你的代码需要取用某个对象属性时，后台同学却在该属性上挂了一个默认值 NULL 等，另一方面，开发过程中的接口改动是无法避免的，所以在代码结构的设计上，应该尽可能将可能变化的部分聚合起来。
比较实用的做法就是为每一个接口建立一个 Transformer 函数，从后台请求来的数据先经过 Transformer 函数变换为前台能够流通使用的数据结构，并在必要的属性上添加适当的默认值防止报错，你可以尽情地在此使用 Lodash.js 等函数工具来加工和重组自己需要的数据，即使最初后台传给你的数据不需要加工，也可以保留一个透传函数或是模块说明以提醒其他协作开发者在面对这种场景时采用类似的做法，它的功能就是 为逻辑层提供直接可用的数据 。当前端代码越来越重时， Transformer 和 Request 部分可以很方便地移动到中间层。
4. 善用computed和filters处理数据展示
对原始数据的转换并不能覆盖所有场景，这就需要在定制展示的场景中利用 computed 和 filters ，它们都可以用来在不改变数据的情况下更改展示结果，例如将数据中的0或1转换为 未完成 和 已完成 ，或者是将时间戳和当前时间作比较后改为可读性更高的 刚刚 , 1分钟前 , 1小时前 , 1天前 等等，这些开发场景中是不能采用强行赋值来处理的，这是就可以使用计算属性 computed 或过滤器 filters 来处理，它们的区别是 computed 一般用于组件内部，不具有通用性，而 filters 一般用于可复用的场景，可以通过下面的形式来定义一个 展示效果为首字母大写 的全局过滤器：
Vue.filter('capitalize', function (value) { if (!value) return ''； value = value.toString()； return value.charAt(0).toUpperCase() + value.slice(1)； })
当项目中使用 vuex 来进行状态管理时， computed 通常会等价替换为 state 中的 getter 。
5. 使用directive处理DOM操作
尽管 Vue 提供了 refs 这个接口来实现在逻辑层直接操作 DOM ，但我们应当尽可能避免将复杂的 DOM 操作放在这里，有时候页面上 DOM 变化的场景较多，将每个变化都使用数据驱动的方式显然是不合理的，这时就需要用到指令特性 directive ，它常用来补充实现一些业务逻辑无关的 DOM 变化（业务逻辑相关的变化大都通过数据绑定进行了自动关联）。 directive 的基本用法可以直接参考 【官方指南】 ，需要注意的是许多初级开发者都不太在意内存泄漏的问题，在 directive 的使用中需要格外注意这一点，通常我们会在 bind 事件钩子中绑定事件并使用属性持有这个监听函数，并在 unbind 钩子中解除对同一个监听函数的绑定，即使没有使用自定义指令，你也需要建立在必要时解绑监听器的编码习惯：
Vue.directive('clickoutside',{ bind:function (el, binding){ //定义监听器 function handler(e) { if (el.contains(e.target)) { return false; } if (binding.expression){ binding.value(e); } } el.__clickOutSide__ = handler; document.addEventListener('click', handler); }, unbind:function (el) { document.removeEventListener('click',el.__clickOutSide__); delete el.__clickOutSide__ ; } });
demo 中提供了一个简单的 directive 示例，你可以用它来做练习。
总结
以上所述是小编给大家介绍的Vue中拆分视图层代码的5点建议,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: