一、组件的划分

思路: 将可共用的视图组件剥离出去，如常见的header、footer、nav等，这些剥离复用的组件甚至可以带有完整的业务逻辑，这种方法比较常用，具体不同业务有不同做法。

二、剥离业务逻辑代码

的部分通常包含有交互逻辑，业务逻辑，数据转换以及**DOM操作，**过多的业务逻辑代码显得杂糅。如：

    export default{name:'XXX',methods:{// 交互逻辑，点击触发handleEditFormClick(){this.sendEdit();},// 业务代码，提交编辑表单sendEditForm(){//.... }}}

因此可以保留交互逻辑部分，将业务逻辑剥离出去，改为：

// service.js 剥离出来的业务模块
export const FormService =  {snedEditForm(){//....     },// 更多表单业务sendCreateForm(){}
}

 import {FormServicer} from './service.js'export default{name:'XXX',methods:{// 交互逻辑，点击触发handleEditFormClick(){FormService.sendEditForm(); },}}

这样改写，保留在View层中的代码很容易转换为使用vuex时的编码风格。

三、剥离数据转换代码

在前后端分离模式中，后端给的数据并不一定能直接使用，比如时间戳需要转为相应格式才能展示等等，如果每次都在请求数据回调到客户端之后再做判断处理，代码会过于杂糅，不符合拆分思想。

一般请求数据的过程：

为避免在视图层中处理数据转换逻辑，可以在post/get返回请求后进行处理，再回传给视图层。

api层

import {get,post} from './http' //axios封装方法
import userUrl from './module/user' // 存放请求url
/*
export default {getUsers:'user/query'
}
*/
import {dateTrans} from '../assets/js/util/DateTrans' // 处理时间戳方法
/*
export const dateTrans = function(timestamp){// 这里简单直接转化为具体日期return new Date(timestamp * 1000).toLocaleString()
}
*/// 获取用户列表方法
export function getUserQuery(){return new Promise((resolve,reject)=>{get(userUrl.getUsers).then(res=>{if(res){res['result_rows'].forEach(user=>{user.last_login_time = dateTrans(user.last_login_time); // 处理时间戳})resolve(res);}else{resolve('user query not found');}}).catch(err=>{reject('request err');})})
}
// 其他接口
export function getItemQuery(){// ...
}

数据格式：

{"res_code" : "0","result_rows":[{"uname":"jenson","last_login_time": "1573638377"},{"uname":"lee","last_login_time": "1573638344"}]}

Vue中调用：

import {getUserQuery} from '../request/api'
handleGetUserQuery(){getUserQuery().then(result=>{// ...})}

这样一样，数据格式处理的部分剥离到相应工具模块(util)中，并在请求api中调用，使视图层代码更简洁。

四、用computed和filters处理数据展示

对原始数据的转换并不能覆盖所有场景，在特定场景中需要一些定制的数据过滤转换器。

**computed : **较常用，不过只能用于组件内部，不具备通用性。

<h2 v-text="upperCaseName"></h2> //LIUJIAPENG
<script>data(){return{name:'liujiapeng'}}computed:{upperCaseName(){return this.name.toUpperCase()}},
</script>

filters : 可以全局使用，也可以局部使用

<h2>{{name|checkCase(name)}}</h2> //LIUJIAPENG<script>data(){return{name:'liujiapeng'}}filters:{checkCase:function(data){return data.toUpperCase()}},
</script>

全局使用

Vue.filter('checkCase', function (data) {return data.toUpperCase()
})

五. 使用directive处理DOM操作

Vue中视图层的拆分相关推荐

劲爆！javaweb架构中视图层作用
8-22 投递简历 8-24 一面(大概1h50min) 0.currenthashmap怎么扩容的?fwn为什么固定hash -1,这样设计有什么好处?帮助扩容是发生在什么阶段?读线程和写线程都会帮 ...
解决vue中对象属性改变视图不更新的问题
解决vue中对象属性改变视图不更新的问题参考文章: (1)解决vue中对象属性改变视图不更新的问题 (2)https://www.cnblogs.com/buxiugangzi/p/12050165 ...
「后端小伙伴来学前端了」Vue中 this.$set的用法 | 可用于修改对象中数组的某一个对象、可用于更新数据到视图
夜晚有明月,梦里有佳人前言最近在写老师布置的vue项目,真的说实话,每天真就是在百度.google.bing等各个搜索引擎之间反复横跳,不然就是掘金搜一搜.思否搜一搜,还有CSDN看一看.我的前端 ...
Vue中使用v-for实现一对多数据的2层和3层嵌套循环
场景业务场景中常有一对多的情况. 后端在给前端返回数据时是一个对象的list,为每个对象的有一个属性是多的那个的对象的list. 比如后台给前端返回的数据示例如下那么在Vue中怎样将这个一对多的 ...
vue中什么样的数据可以是在视图中显示
1. Vue中不可以添加不存在的属性,因为不存在的属性是没有getter和setter的. <div id="app">{{msg.a}}{{msg.b}}</d ...
vue 修改对象的值视图没有发生改变_在vue中处理对象属性改变视图不更新问题？ - echart...
...图等等,但是这些代码比较难写,因此我们通常会用借助echarts,那你知道如何使用echarts吗?这篇文章就和大家讲讲echarts的使用方法,有一定的参考价值,感兴趣的朋友可以看看.以饼状图 ...
【微信小程序】一文带你吃透小程序开发框架——视图层中的事件系统
0️⃣前言事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id ...
vue 中哪些操作自动触发更新视图
vue 中哪些操作自动触发更新视图 vue数组对象修改触发视图更新直接修改数组元素是无法触发视图更新的,如 this.array[0] = {name: 'meng',age: 22 } 修改arr ...
Vue中的Diff算法 patch函数-简单Diff算法-双端Diff算法-快速Diff算法-当数据发生改变，视图如何更新？
文章目录 Vue中的Diff算法概述前置知识 patch方法简单Diff算法总结双端Diff算法 --vue2 快速Diff算法 --vue3 vue2和vue3 Diff算法的区别当数据 ...

Vue中视图层的拆分