优雅的vue.js
优雅的vue.js代码
https://www.cnblogs.com/zhengrunlin/p/9164951.html
- watch 与 computed 的巧妙结合
如上图,一个简单的列表页面。
你可能会这么做:
created(){
this.fetchData()
},
watch: {
keyword(){
this.fetchData()
}
}
如果参数比较多,比如上图
关键字筛选,
区域筛选,
设备ID筛选,
分页数,
每页几条数据,
可能会是这样:
data(){
return {
keyword:'',
region:'',
deviceId:'',
page:1
}
},
methods:{
fetchData(paramrs={
keyword:this.keyword,
region:this.region,
deviceId:this.deviceId,
page:this.page,
}){
this.$http.get("/list",paramrs).then("do some thing")
}
},
created(){
this.fetchData()
},
watch: {
keyword(data){
this.keyword=data
this.fetchData()
},
region(data){
this.region=data
this.fetchData()
},
deviceId(data){
this.deviceId=data
this.fetchData()
},
page(data){
this.page=data
this.fetchData()
},
requestParams(params){
this.fetchData(params)
}
}
不过这么写,明显有问题,主要是watch了很多参数,而且函数的处理都差不多,可以修改一下,通过methods处理
data(){
return {
keyword:'',
region:'',
deviceId:'',
page:1
}
},
methods:{
paramsChange(paramsName,paramsValue){
this[paramsName]=paramsValue
this.fetchData()
},
fetchData(paramrs={
keyword:this.keyword,
region:this.region,
deviceId:this.deviceId,
page:this.page,
}){
this.$http.get("/list",paramrs).then("do some thing")
}
},
created(){
this.fetchData()
}
当然这么写,需要在模板里面每个参数change的地方绑定事件,并传递参数值,比如分页change时:
<el-pagination
layout="total, prev, pager, next, jumper"
:total="total"
prev-text="上一页"
next-text="下一页"
@current-change="paramsChange('page',$event)"
>
相比上面的各种watch,代码明显少了很多,但是还有一个问题,那就是要在template的很多地方绑定change事件。
最后,当然是使用我们重点推荐的computed + watch了
data(){
return {
keyword:'',
region:'',
deviceId:'',
page:1
}
},
computed:{
requestParams() {
return {
page: this.page,
region: this.region,
id: this.deviceId,
keyword: this.keyword
}
}
},
methods:{
fetchData(paramrs={
keyword:this.keyword,
region:this.region,
deviceId:this.deviceId,
page:this.page,
}){
this.$http.get("/list",paramrs).then("do some thing")
}
},
watch: {
requestParams: {
handler: 'fetchData',
immediate: true
}
},
通过增加一个computed属性,watch这个属性并设置immediate为true,无需再手动绑定事件,相比之上的方法都要简洁。当然,缺点就是对性能稍微有些影响,不过问题不大。
- 使用mixin提取公共部分
很多列表页其实使用的很多属性都是一样的,比如
分页 page
数量 size
搜索关键 字keyword
表格数据 tableData
这些公共的部分其实可以通过mixin来提取出来
/**
- mixin/table.js
*/
export default {
data() {
return {
keyword: '',
requestKeyword: '',
pages: 1,
size: 10,
total: 0,
tableData: []
}
}
}
在要用到的页面
import mixin from '@/mixin/table'
export default {
mixins: [mixin],
data() {
return {
selectRegion: '',
selectDevice: '',
deviceList: [],
}
}
/* 其他代码 */
...
3. 自动注册全局组件
正常情况下,我们需要使用一个我们自己封装的组件时,需要先引入,再注册,最后才能在template模板中使用。
当有多个页面需要用到这些组件时,那么就需要在每个需要的页面重复这些步骤。
为了简化这些步骤,可以考虑把这些组件作为全局组件来使用,这样每个页面需要时,就可以直接使用了。
不过还有一个问题,那就是需要我们手动的全局注册。
/* main.js */
import Component1 from '@/component/compenent1'
import Component2 from '@/component/compenent2'
import Component3 from '@/component/compenent3'
Vue.component('component1', Component1)
Vue.component('component2', Component2)
Vue.component('component3', Component3)
当组件多了以后,手动注册也变得繁琐起来,可以通过require.context()实现自动注册组件。
/**
- main.js
- 读取componetns下的vue文件并自动注册全局组件
*/
const requireComponent = require.context('./components', false, /.vue$/)
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName)
const componentName = fileName.replace(/^\.\//, '').replace(/\.vue/, '')
Vue.component(componentName, componentConfig.default || componentConfig)
})
4. 自动注册vuex模块
之前我们是这么注册vuex模块的
/* module.js */
import alarm from './modules/alarm'
import history from './modules/history'
import factory from './modules/factory'
import contact from './modules/contact'
import company from './modules/company';
import deviceManage from './modules/device-manage'
import deviceModel from './modules/device-model'
import deviceActivation from './modules/device-activation'
import user from './modules/user'
import role from './modules/role'
import setAlarm from './modules/setAlarm'
import factoryMode from "./modules/factoryMode";
import ScreenDeviceWatch from './modules/screen-device-watch'
import ScreenDeviceForecast from './modules/screen-device-forecast'
export default {
alarm,
company,
deviceManage,
deviceModel,
user,
factory,
contact,
deviceActivation,
history,
role,
setAlarm,
factoryMode,
ScreenDeviceWatch,
ScreenDeviceForecast,
}
/* index.js */
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import modules from './modules'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({
state,
getters,
mutations,
actions,
modules
})
可以发现每个模块都要我们手动导入,然后加入到module里面,如此重复。当模块不多还好,假如项目大了,有50个模块,那就得要做很多重复的工作。
跟注册组件一样,我们还是利用require.context来实现。
/**
- 读取./modules下的所有js文件并注册模块
*/
const requireModule = require.context('./modules', false, /.js$/)
const modules = {}
requireModule.keys().forEach(fileName => {
const moduleName = fileName.replace(/(./|.js)/g, '')
modules[moduleName] = {
namespaced: true,
...requireModule(fileName).default
}
})
export default modules
/* index.js */
import Vue from 'vue'
import Vuex from 'vuex'
import modules from './modules'
Vue.use(Vuex)
export default new Vuex.Store({
state,
getters,
mutations,
actions,
modules
})
本文参考自油管上某个国外大神的公开演讲视频,学习了一下觉得很不错,所以在项目中也使用了这些不错的技巧。趁周末有空,写个博客记录一下。
优雅的vue.js的更多相关文章
- 几个你所不知道的技巧助你写出更优雅的vue.js代码
1. watch 与 computed 的巧妙结合 如上图,一个简单的列表页面. 你可能会这么做: created(){ this.fetchData() }, watch: { keyword(){ ...
- Vue.js优雅的实现列表清单的操作
一.Vue.js简要说明 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当Vie ...
- Vue.js优雅的实现列表清单
一.Vue.js简要说明 Vue.js (读音 /vjuː/) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当View视图层发生变化时 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- MVVM大比拼之vue.js源码精析
VUE 源码分析 简介 Vue 是 MVVM 框架中的新贵,如果我没记错的话作者应该毕业不久,现在在google.vue 如作者自己所说,在api设计上受到了很多来自knockout.angularj ...
- vue.js 开发生态总结
---title: Vue 1.0 的技术栈date: 2016-09-26 00:48:50tags:category:--- ## vuejs概述 Vue.js是用于构建交互式的Web界面的库.它 ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- 前端开发之走进Vue.js
Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,了解Vue.js的开发流程,并进一步理解如何通过Vue.j ...
- 浅谈Vue.js
作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...
随机推荐
- Spring定时服务QuartZ
在JavaEE系统中,我们会经常用到定时任务,比如每天凌晨生成前天报表,每一小时生成汇总数据等等. 我们可以使用java.util.Timer结合java.util.TimerTask来完成这项工作, ...
- c++11 decltype
c++11 decltype decltype实际上有点像auto的反函数,auto可以让你声明一个变量,而decltype则可以从一个变量或表达式中得到类型.decltype在C++11标准制定时引 ...
- 洛谷P4135 作诗
题意:[l,r]之间有多少个数出现了正偶数次.强制在线. 解:第一眼想到莫队,然后发现强制在线...分块吧. 有个很朴素的想法就是蒲公英那题的套路,做每块前缀和的桶. 然后发现这题空间128M,数组大 ...
- EasyUI实战篇之datagrid:如何重新设置datagrid所配置的属性(options)并重新查询列表(relaod)
http://www.stepday.com/topic/?873 今天在使用EasyUI的datagrid列表组件想实现一个列表的展现,且列表上方有搜索条件,初始化的时候我是这样配置的: 1.< ...
- HDU 5528 反演
$f(m)=\sum\limits_{i=1}^{m-1}\sum\limits_{j=1}^{m-1}[(ij,m) \ne m]$,$g(n)=\sum\limits_{m|n}f(m)$,$1 ...
- 何凯文每日一句||DAY10
- 那些年的 网络通信之 UDP 数据报包传输---
下面是 一个多线程,基于 UDP 用户数据报包 协议 的 控制台聊天小程序 import java.io.*; import java.net.*; class Send implements Run ...
- NAT地址转换
2017年1月12日, 星期四 NAT地址转换 SNAT:源地址转换 DNAT:目标地址转换 null
- 第13月第12天 Constraints priority
1.Constraints priority 将evInputView的高度约束的priority设为750,evInputView的inputTextView如果不设高度约束,那么高度就是defau ...
- CSS position:absolute浅析
一.绝对定位的特征 绝对定位有着与浮动一样的特性,即包裹性和破坏性. 就破坏性而言,浮动仅仅破坏了元素的高度,保留了元素的宽度:而绝对定位的元素高度和宽度都没有了. 请看下面代码: <!DOCT ...