详解Vue中watch的详细用法


Posted in Javascript onNovember 28, 2018

在vue中,使用watch来响应数据的变化。watch的用法大致有三种。下面代码是watch的一种简单的用法:

'''
 <input type="text" v-model="cityName"/>
 new Vue({
 el: '#root',
 data: {
 cityName: 'shanghai'
 },
 watch: {
 cityName(newName, oldName) {
 // ...
 }
 }
 })

'''

直接写一个监听处理函数,当每次监听到 cityName 值发生改变时,执行函数。也可以在所监听的数据后面直接加字符串形式的方法名:

'''
watch: {
 cityName: 'nameChange'
 }
 }
 '''

immediate和handler

这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

比如当父组件向子组件动态传值时,子组件props首次获取到父组件传来的默认值时,也需要执行函数,此时就需要将immediate设为true。

'''
new Vue({
 el: '#root',
 data: {
 cityName: ''
 },
 watch: {
 cityName: {
handler(newName, oldName) {

// ...

},

immediate: true
 }
 }
 })
 '''

监听的数据后面写成对象形式,包含handler方法和immediate,之前我们写的函数其实就是在写这个handler方法;

immediate表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化的时候才执行handler。

deep

当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。

'''
 <input type="text" v-model="cityName.name"/>
 new Vue({
 el: '#root',
 data: {
 cityName: {id: 1, name: 'shanghai'}
 },
 watch: {
 cityName: {
 handler(newName, oldName) {
 // ...
 },
 deep: true,
 immediate: true
 }
 }
 })
 '''

设置deep: true 则可以监听到cityName.name的变化,此时会给cityName的所有属性都加上这个监听器,当对象属性较多时,每个属性值的变化都会执行handler。如果只需要监听对象中的一个属性值,则可以做以下优化:使用字符串的形式监听对象属性:

'''
watch: {
 'cityName.name': {
 handler(newName, oldName) {
 // ...
 },
 deep: true,
 immediate: true
 }
 }
'''

总结

以上所述是小编给大家介绍的Vue中watch的详细用法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Extjs4 类的定义和扩展实例
Jun 28 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
Dec 09 Javascript
微信小程序开发经验总结(推荐)
Jan 11 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
JavaScript验证知识整理
Mar 24 Javascript
AngularJS获取json数据的方法详解
May 27 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
Nov 08 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
JavaScript canvas仿代码流瀑布
Feb 10 Javascript
vue 实现用户登录方式的切换功能
Apr 14 Javascript
vscode下的vue文件格式化问题
Nov 28 #Javascript
微信小程序如何获取用户收货地址
Nov 27 #Javascript
详解vue2.0 资源文件assets和static的区别
Nov 27 #Javascript
微信小程序实现点击图片旋转180度并且弹出下拉列表
Nov 27 #Javascript
js canvas实现画图、滤镜效果
Nov 27 #Javascript
js canvas画布实现高斯模糊效果
Nov 27 #Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 #Javascript
You might like
中国第一家无线电行
2021/03/01 无线电
支持oicq头像的留言簿(一)
2006/10/09 PHP
PHP学习资料汇总与网址
2007/03/16 PHP
PHP统计目录大小的自定义函数分享
2014/11/18 PHP
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
ExtJS4 动态生成的grid导出为excel示例
2014/05/02 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
纯js实现倒计时功能
2017/01/06 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
Vue实现商品飞入购物车效果(电商项目)
2019/11/26 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
Python实现Const详解
2015/01/27 Python
python 获取网页编码方式实现代码
2017/03/11 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
Python数据报表之Excel操作模块用法分析
2019/03/11 Python
django在保存图像的同时压缩图像示例代码详解
2020/02/11 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
关于工资低的辞职信
2014/01/14 职场文书
简历里的自我评价
2014/01/31 职场文书
毕业生自荐书
2014/02/02 职场文书
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
党建工作整改措施
2014/10/28 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
工商局个人工作总结
2015/03/03 职场文书
黑暗中的舞者观后感
2015/06/18 职场文书
党员证明信
2015/06/19 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL