vue 监听 watch 使用
1、api
https://cn.vuejs.org/v2/api/#watch
有2个配置:
(1)深度 watcher
deep: true
(2)该回调将会在侦听开始之后被立即调用
immediate: true 2、使用场景
created(){
this.fetchPostList()
},
watch: {
searchInputValue(){
this.fetchPostList()
}
}
组件创建的时候我们获取一次列表,同时监听input框,每当发生变化的时候重新获取一次筛选后的列表这个场景很常见,有没有办法优化一下呢?
招式解析:
首先,在watchers中,可以直接使用函数的字面量名称;其次,声明immediate:true表示创建组件时立马执行一次。
watch: {
searchInputValue:{
handler: 'fetchPostList',
immediate: true
}
}
例如有请求需要再也没初始化的时候就执行一次,然后监听他的变化,很多人这么写:
created(){
this.fetchPostList()
},
watch: {
searchInputValue(){
this.fetchPostList()
}
}
上面的这种写法我们可以完全如下写:
watch: {
searchInputValue:{
handler: 'fetchPostList',
immediate: true
}
}
vue 监听 watch 使用的更多相关文章
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
- vue 监听页面宽度变化 和 键盘事件
vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...
- vue 监听对象里的特定数据
vue 监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...
- Vue跨路由触发事件,Vue监听sessionStorage
近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...
- Vue 监听鼠标左键 鼠标右键以及鼠标中键修饰符click.left&contextmenu&click.middle
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 监听键盘,键盘修饰符keyup
附录:键盘Key Code对照表 代码: <!doctype html> <html lang="en"> <head> <meta ch ...
- vue 监听路由变化
方法一:通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 // 监听,当路由发生变化的 ...
- vue监听滚动事件-元素固定位置显示
1.监听滚动事件 用VUE写一个在控制台打印当前的scrollTop用来测试是否执行: mounted () { window.addEventListener('scroll', this.hand ...
- vue 监听变量或对象
注意:监听的对象必须已经在data中声明了 data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a: function (va ...
- vue监听滚动事件 实现某元素吸顶或者固定位置显示
https://blog.csdn.net/wang1006008051/article/details/78003974 1.监听滚动事件 利用VUE写一个在控制台打印当前的scrollTop, 首 ...
随机推荐
- JVM(8):JVM知识点总览-高级Java工程师面试必备
http://www.importnew.com/23792.html jvm 总体梳理 jvm体系总体分四大块: 类的加载机制 jvm内存结构 GC算法 垃圾回收 GC分析 命令调优 当然这些知识点 ...
- iOS设备唯一标识(可以用版)
由于UDID和OpenUDID被禁用,系统自带的的识别唯一标识有两种 广告标示符(IDFA-identifierForIdentifier) 这是iOS 6中另外一个新的方法,advertisingI ...
- 【bzoj1408】[Noi2002]Robot 数论+dp
题目描述 输入 输出 样例输入 3 2 1 3 2 5 1 样例输出 8 6 75 题解 语文题+数论+dp 花了大段讲述什么叫mu,什么叫phi,只是新定义的mu将2看作有平方因子,新定义的phi( ...
- How to modify a compiled Android application (.apk file)
Today I’d like to share with you my findings about how an existing .apk file can be modified. An .ap ...
- AGC 26 D Histogram Coloring
题目 将柱子的高度离散化$\DeclareMathOperator{\dp}{dp}$ 设第 $i$ 根柱子实际高度是 $h_i$,离散化之后的高度是 $g_i$:第 $i$ 高的高度是 $H_i$, ...
- 2017-3-01 test
三道好像都是HDU上的题QAQ 题目名称都没改,差评 T1:http://acm.hdu.edu.cn/showproblem.php?pid=5073 被卡精度了QAQ 先排一发序,然后发现最后未动 ...
- nginx进行项目域名配置时提示Job for nginx.service failed
ps aux | grep nginx /bin/systemctl stop nginx.service /bin/systemctl start nginx.service /bin/system ...
- 标准IO与文件IO 的区别
先来了解下什么是标准IO以及文件IO. 标准IO:标准I/O是ANSI C建立的一个标准I/O模型,是一个标准函数包和stdio.h头文件中的定义,具有一定的可移植性.标准IO库处理很多细节.例如缓存 ...
- Bzoj1974 [Sdoi2010]auction 代码拍卖会
Time Limit: 10 Sec Memory Limit: 64 MBSubmit: 375 Solved: 151 Description 随着iPig在P++语言上的造诣日益提升,他形成 ...
- 【HDOJ5510】Bazinga(KMP)
题意:给定n个由小写字母组成的字符串,第i个字符串为a[i],求最大的j满足存在1<=i<j,a[i]不是a[j]的子串,无解输出-1 T<=50,n<=500,len[i]& ...