Vue.js 编程技巧:Watch 和 Computed 的巧妙结合
52 浏览量
更新于2024-08-30
1
收藏 71KB PDF 举报
Vue.js 代码优雅写法技巧
在 Vue.js 开发中,写出优雅的代码是非常重要的。本文将介绍 several unknown tricks to help you write more elegant Vue.js code。
1. Watch 与 Computed 的巧妙结合
在 Vue.js 中,Watch 和 Computed 是两个非常重要的概念。但是,如何将它们结合起来使用呢?下面是一个简单的列表页面的示例:
```javascript
created(){
this.fetchData()
},
watch: {
keyword(){
this.fetchData()
}
}
```
在上面的代码中,我们使用 Watch 来监听 keyword 的变化,并在变化时调用 fetchData 方法。但是,问题来了,如果参数比较多,例如关键字筛选、区域筛选、设备ID筛选、分页数、每页几条数据等等,那么 Watch 的写法将变得非常复杂。
```javascript
data(){
return {
keyword:'',
region:'',
deviceId:'',
page:1
}
},
methods:{
fetchData(params={
keyword:this.keyword,
region:this.region,
deviceId:this.deviceId,
page:this.page,
}){
this.$http.get("/list",params).then("dosomething")
}
},
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 处理
我们可以使用 Methods 来处理参数的变化,而不是使用 Watch。下面是一个示例:
```javascript
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("dosomething")
}
}
```
在上面的代码中,我们使用一个 paramsChange 方法来处理参数的变化,并在变化时调用 fetchData 方法。这样,我们可以将代码变得更加简洁和易维护。
使用 Watch 和 Computed 的巧妙结合可以帮助我们写出更加优雅的 Vue.js 代码。但是,我们也需要注意代码的可维护性和可读性,以便更好地维护和更新我们的代码。
在 Vue.js 开发中,写出优雅的代码是非常重要的。只有写出优雅的代码,我们才能更好地维护和更新我们的项目。
2020-12-11 上传
2020-11-30 上传
点击了解资源详情
点击了解资源详情
点击了解资源详情
点击了解资源详情
2023-06-14 上传
2024-01-23 上传
weixin_38675746
- 粉丝: 6
- 资源: 956
最新资源
- 新代数控API接口实现CNC数据采集技术解析
- Java版Window任务管理器的设计与实现
- 响应式网页模板及前端源码合集:HTML、CSS、JS与H5
- 可爱贪吃蛇动画特效的Canvas实现教程
- 微信小程序婚礼邀请函教程
- SOCR UCLA WebGis修改:整合世界银行数据
- BUPT计网课程设计:实现具有中继转发功能的DNS服务器
- C# Winform记事本工具开发教程与功能介绍
- 移动端自适应H5网页模板与前端源码包
- Logadm日志管理工具:创建与删除日志条目的详细指南
- 双日记微信小程序开源项目-百度地图集成
- ThreeJS天空盒素材集锦 35+ 优质效果
- 百度地图Java源码深度解析:GoogleDapper中文翻译与应用
- Linux系统调查工具:BashScripts脚本集合
- Kubernetes v1.20 完整二进制安装指南与脚本
- 百度地图开发java源码-KSYMediaPlayerKit_Android库更新与使用说明