Vue.js 编程技巧：Watch 和 Computed 的巧妙结合

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 开发中，写出优雅的代码是非常重要的。只有写出优雅的代码，我们才能更好地维护和更新我们的项目。