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

1. watch 与 computed 的巧妙结合

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

你可能会这么做：

rush:js;"> created(){ this.fetchData() },watch: { keyword(){ this.fetchData() } }

如果参数比较多，比如上图

• 关键字筛选，
• 区域筛选，
• 设备ID筛选，
• 分页数，
• 每页几条数据，

可能会是这样：

rush:js;"> 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处理

rush:js;"> data(){ return { keyword:'',methods:{ paramsChange(paramsName,paramsValue){ this[paramsName]=paramsValue this.fetchData() },fetchData(paramrs={ keyword:this.keyword,created(){ this.fetchData() }

当然这么写，需要在模板里面每个参数change的地方绑定事件，并传递参数值,比如分页change时：

rush:js;">

相比上面的各种watch，代码明显少了很多，但是还有一个问题，那就是要在template的很多地方绑定change事件。

最后，当然是使用我们重点推荐的computed + watch了

rush:js;"> data(){ return { keyword:'',computed:{ requestParams() { return { page: this.page,region: this.region,id: this.deviceid,keyword: this.keyword } } },watch: { requestParams: { handler: 'fetchData',immediate: true } },

通过增加一个computed属性，watch这个属性并设置immediate为true，无需再手动绑定事件，相比之上的方法都要简洁。当然，缺点就是对性能稍微有些影响，不过问题不大。

2. 使用mixin提取公共部分

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

• 分页 page
• 数量 size
• 搜索关键 字keyword
• 表格数据 tableData

这些公共的部分其实可以通过mixin来提取出来

rush:js;"> /** * mixin/table.js */ export default { data() { return { keyword: '',requestKeyword: '',pages: 1,size: 10,total: 0,tableData: [] } } }

在要用到的页面

rush:js;"> import mixin from '@/mixin/table' export default { mixins: [mixin],data() { return { selectRegion: '',selectDevice: '',deviceList: [],} } /* 其他代码 */ ...

3. 自动注册全局组件

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

rush:js;">