1. 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)"
>
</el-pagination>相比上面的各种watch，代码明显少了很多，但是还有一个问题，那就是要在template的很多地方绑定
change事件。最后，当然是使用我们重点推荐的
computed +
watch了
