watch 的使用
首先 watch 是一个对象,一定要当成对象来说使用。对象就有键和值。
键:就是你监听的东西,比如:$route(监听路由),或者data 中的某个变量。
值:可以是函数或者函数名。如果是函数,则监听变化时,需要执行的函数,这个函数有两个参数,一个是变化后的值,一个是变化前的值,而如果是函数名,则需要用单引号来包裹。
当然值是包括选项的对象。
更多详情,请参考案例:vue 从某个页面进入到当前路由时,滚动浏览器视图到特定内容的可视区域。
handler 回调函数:监听到变化是,应执行的函数;
deep:其值为 true/false,确认是否深度监听(深度监听可以监听对象属性和数组的变化);
immediate:其值为 true/false,确认是否以当前的初始值执行 handler 函数。
immediate 设为 true 后,则监听的这个属性会立即输出,也就是说一刷新页面就会在控制台输出,当然此时页面上的数据我们还没来得及手动让其发生变化,所以在控制台输出的newValue为我们在代码中默认设置的值,oldValue输出为“undefined”。
搜索框搜索
现在的思路是定义一个searchValue,searchValue绑定输入框,然后watch searchValue,调用getList()方法(当然也有其他好的想法)
watch:{
serachValue(){
this.getList()
//getList里面通过searchValue去搜索数据库
}
}
//这个方法按上面的思路是肯定有这个的
而在页面生成完成后需要调用getList()获取全部数据
created():{
this.getList();
}
整个页面的搜索部分代码
export default {
data(){
return {
sarchValue:""
}
},
created():{
this.getList();
},
methods:{
getList(){
server.getList({
serachValue:this.searchValue
})
}
},
watch:{
serachValue(){
this.getList()
//getList里面通过searchValue去搜索数据库
}
}
}
现在我们如果使用了immediate后应该是这样写的呢,现在我们搬出immediate:true的定义初始化立即执行,现在这里我们可以理解:data里面定义了searchValue后就立即执行handle
我们可以把watch改改
watch:{
serachValue:{
//使用watch值是对象的第三种情况
handler:"getList"
//getList里面通过searchValue去搜索数据库
immediate:true
}
}
- 初始化立即执行,这样我们就可以在created中去掉this.getList()了
export default {
data(){
return {
sarchValue:""
}
},
created():{
},
methods:{
getList(){
server.getList({
serachValue:this.searchValue
})
}
},
watch:{
serachValue:{
//使用watch值是对象的第三种情况
handler:"getList"
//getList里面通过searchValue去搜索数据库
immediate:true
}
}
}
这样在data中定了searchValue="";就直接调用getList(),而且sarchValue=""查找所有
这个例子只是为空说明immediate的使用场景