几个你不知道的技巧助你写出更优雅的vue.js代码

1.看与计算的巧妙结合

如上图，一个简单的列表页面。

你可能会这么做：

created(){ this.fetchData() }，watch : { keyword(){ this。fetchdata()} }如果参数比较多，比如上图

关键字筛选，区域筛选，设备身份筛选，分页数，每页几条数据，可能会是这样：

data(){ return { keyword: ' '，region: ' '，deviceId: ' '，page:1 }}，methods : { fetchData(params={ keyword : this。关键字，region : thi . region，deviceid : thi . deviceid，page : thi . page，}){ thi .$http.get('/list '，paramrs).然后('做一些事情)}}，created(){ this.fetchData()}，watch : { keyword(data){ this。关键字=data this。fetchdata()}，region(data){ this。region=data this。fetchdata()}，deviceId(数据){ this。deviceId=此数据。fetchdata()}，page(data){ this。page=数据。fetchdata()}，请求参数(params){ this。fetchdata(params)} }不过这么写，明显有问题，主要是看了很多参数，而且函数的处理都差不多，可以修改一下，通过方法处理

data(){ return { keyword: ' '，region: ' '，deviceId: ' '，page:1 }}，methods : { params change(params name，params value){ this[params name]=params value this。fetchData()}，fetchData(params={关键字： this。关键字，region : thi . region，deviceid 3360 this。deviceid，第：页.$http.get('/list '，paramrs).然后('做一些事情')}},创建了(){ this.fetchData()}当然这么写，需要在模板里面每个参数变化的地方绑定事件，并传递参数值，比如分页变化时：

电子传呼布局='total，prev，pager，next，jumper ' : total=' total ' prev-text='上一页下一个文本='下一页@ current-change=' paramsChange(' page '，$ event)'/El-分页相比上面的各种看着，代码明显少了很多，但是还有一个问题，那就是要在模板的很多地方绑定变化事件。

最后，当然是使用我们重点推荐的电脑手表了

data(){ return { keyword: ' '，region: ' '，deviceId: ' '，page:1 }}，computed : { request params(){ return { page : this。page，region: this.region，id: this.deviceId，keyword: this.keyword } }，methods 3: { fetchData(parars={ key word : this。关键字，区域3360。关键词.$http.get('/list '，paramrs).然后('做一些事情)}}，watch : { request params 3360 { handler : ' fetchData '，immediate: true }}，通过增加一个计算属性看着这个属性并设置马上为没错，无需再手动绑定事件，相比之上的方法都要简洁。当然，缺点就是对性能稍微有些影响，不过问题不大。

2.使用混入类提取公共部分

很多列表页其实使用的很多属性都是一样的，比如

分页页数量大小搜索关键字关键字表格数据列表数据这些公共的部分其实可以通过混入类来提取出来

/* * * mixin/table。js */export default { data(){ return { keyword : ' '，requestKeyword: ' '，pages: 1，size: 10，total : 0 0 0，tableData: [] } }在要用到的页面

从" @/mixin/table "导入混入类导出默认值{ mixin :[mixin]，data()}返回{ selectRegion: ' '，selectDevice: ' '，deviceList: []，} } /*其他代码*/.3.自动注册全局组件

正常情况下，我们需要使用一个我们自己封装的组件时，需要先引入，再注册，最后才能在模板模板中使用。

模板all-region : electregion=' selectRegion ' @ region-change=' selectRegion=$ event '/template script import all region from ' ./BaseButton ' export default { components 3360 { AllRegion，}}/script当有多个页面需要用到这些组件时，那么就需要在每个需要的页面重复这些步骤。

为了简化这些步骤，可以考虑把这些组件作为全局组件来使用，这样每个页面需要时，就可以直接使用了。

不过还有一个问题，那就是需要我们手动的全局注册。

/* main。js */从" @/组件1 "导入构成部分1从" @/组件2 "导入构成部分2从" @/组件/组件3 "导入组件3 vue。组件('组件1 '，组件1)vue。组件('组件2 '，组件2)vue。组件(‘组件3’，组件3)当组件多了以后，手动注册也变得繁琐起来，可以通过require.context()实现自动注册组件。

/** * main.js *读取复合物下的某视频剪辑软件文件并自动注册全局组件*/const require组件=require。上下文(' ./components '，false，/\ .vue $/)require component . key().forEach(文件名={ const component config=require component(文件名)const组件名称=filename.replace(/^\.\//, '').替换(/\。vue/，' ')Vue.component(componentName，component config。默认| |组件配置)})4 .自动注册状态管理模块

之前我们是这么注册状态管理模块的

/*模块。js */从'导入警报/模块/警报”从导入历史记录"。/模块/历史"从导入工厂"。/模块/工厂"从导入联系人"。/模块/联系"进口公司"。/模块/公司；从""导入设备管理。/模块/设备-管理"从导入设备模型"。/模块/设备-型号"从导入设备激活"。/模块/设备-激活"从导入用户"。/模块/用户"从导入角色"。/模块/角色"从导入设置警报./模块/设置警报”从导入工厂模型./模块/工厂模式'；从""导入屏幕设备观察./模块/屏幕-设备-观看"从导入屏幕设备预测"。/modules/screen-device-forecast ' export default { alarm，company，deviceManage，deviceModel，user，factory，contact，deviceActivation，history，role，setAlarm，factoryMode，ScreenDeviceWatch，ScreenDeviceForecast，}/* index。js */从“Vue”导入Vue从“Vuex”导入状态从“”导入Vuex ./state“从导入getter ”./getter "从导入模块"。/模块"从导入操作"。/actions "从导入突变"。/ventures ' vue。使用(Vuex)导出默认的新Vuex .存储({状态、获取器、突变、动作、模块})可以发现每个模块都要我们手动导入，然后加入到组件里面，如此重复。当模块不多还好，假如项目大了，有50个模块，那就得要做很多重复的工作。

跟注册组件一样，我们还是利用要求。上下文来实现。

/** * 读取。/模块下的所有射流研究…文件并注册模块*/const require模块=require。上下文(' ./modules '，false，/\ .js $/)const modules={ }需要模块。keys().forEach(FIlename={ const moduleName=FIlename。替换(/(\).\/|\.js)/g ' ')，模块[moduleName]={ namespace d : true，要求模块（文件名)。默认}})导出默认模块/*索引。js */从vue '导入某视频剪辑软件从Vuex '导入模块从/modules'Vue.use(Vuex)导出默认的新Vuex .存储({状态、获取器、突变、动作、模块})这篇关于如何写出更优雅的vue.js代码的文章就介绍到这了，希望大家以后多多支持我们。