详解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 相关文章推荐
Jvascript学习实践案例(开发常用)
Jun 25 Javascript
ExtJS判断IE浏览器类型的方法
Feb 10 Javascript
javascript实现校验文件上传控件实例
Apr 20 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
AngularJs html compiler详解及示例代码
Sep 01 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
vue 自定义 select内置组件
Apr 10 Javascript
Vue两种组件类型:递归组件和动态组件的用法
Aug 06 Javascript
JavaScript函数柯里化实现原理及过程
Dec 02 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
php smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
php实现保存submit内容之后禁止刷新
2014/03/19 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
PC端微信扫码支付成功之后自动跳转php版代码
2017/07/07 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
JavaScript this调用规则说明
2010/03/08 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
HTTP 304错误的详细讲解
2013/11/13 Javascript
js冒泡、捕获事件及阻止冒泡方法详细总结
2014/05/08 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
jQuery+CSS3实现3D立方体旋转效果
2015/11/10 Javascript
基于jquery实现页面滚动到底自动加载数据的功能
2015/12/19 Javascript
JavaScript中点击事件的写法
2016/06/28 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
Python中的面向对象编程详解(上)
2015/04/13 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
linux 下selenium chrome使用详解
2020/04/02 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
使用python库xlsxwriter库来输出各种xlsx文件的示例
2020/09/01 Python
Python实现像awk一样分割字符串
2020/09/15 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
Python爬取梨视频的示例
2021/01/29 Python
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
用Python写一个for循环的例子
2016/07/19 面试题
人事局接收函
2015/01/30 职场文书
七一活动主持词
2015/06/29 职场文书
实用求职信模板范文
2019/05/13 职场文书