Vue watch响应数据实现方法解析


Posted in Javascript onJuly 10, 2020

在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
  }
 }

这样只会给对象的某个特定的属性加监听器。

数组(一维、多维)的变化不需要通过深度监听,对象数组中对象的属性变化则需要deep深度监听。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript  Error 对象 错误处理
May 18 Javascript
JSON.parse 解析字符串出错的解决方法
Jul 08 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
JS实现关键字搜索时的相关下拉字段效果
Aug 05 Javascript
JQuery中属性过滤选择器用法实例分析
May 18 Javascript
jQuery Easyui实现左右布局
Jan 26 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 Javascript
详解Vue之事件处理
Jul 10 #Javascript
jQuery开发仿QQ版音乐播放器
Jul 10 #jQuery
Element图表初始大小及窗口自适应实现
Jul 10 #Javascript
Vue路由切换页面不更新问题解决方案
Jul 10 #Javascript
简单了解Vue computed属性及watch区别
Jul 10 #Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 #Javascript
基于vue+element实现全局loading过程详解
Jul 10 #Javascript
You might like
PHP5.3的垃圾回收机制(动态存储分配方案)深入理解
2012/12/10 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
php输出文字乱码的解决方法
2019/10/04 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
Jquery Ajax请求代码(2)
2011/01/07 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
javascript简单比较日期大小的方法
2016/01/05 Javascript
js+css实现select的美化效果
2016/03/24 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
2020/04/13 Javascript
selenium 反爬虫之跳过淘宝滑块验证功能的实现代码
2020/08/27 Javascript
Python3实现生成随机密码的方法
2014/08/23 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
python requests库爬取豆瓣电视剧数据并保存到本地详解
2019/08/10 Python
详解Python self 参数
2019/08/30 Python
python实现把两个二维array叠加成三维array示例
2019/11/29 Python
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
文明寄语大全
2014/04/11 职场文书
硕士生找工作求职信
2014/07/05 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
趣味运动会加油词
2015/07/18 职场文书
养成教育主题班会
2015/08/13 职场文书
html5调用摄像头截图功能
2022/01/18 Javascript