Vue使用watch监听一个对象中的属性的实现方法


Posted in Javascript onMay 10, 2019

问题描述

Vue提供了一个watch方法可以让使用者去监听某些data内的数据变动,触发相应的方法,比如

queryData: {
   name: '',
   creator: '',
   selectedStatus: '',
   time: [],
 },

第一种解决方案:直接对象

现在我需要监听这个queryData,我可以这样做:

watch: {
   queryData: {
     handler: function() {
      //do something
     },
     deep: true
   }
}

第二种解决方案:deep

里面的deep设为了true,这样的话,如果修改了这个queryData中的任何一个属性,都会执行handler这个方法。不过其实这样开销是蛮大的,尤其是对象里面结构嵌套过深的时候。而且有时候我们就想关心这个对象中的某个属性,比如name,这个时候可以这样

watch: {
   'queryData.name': {
     handler: function() {
      //do something
     },
   }
}

第三种解决方案:(computed+watch)

或者还可以这样巧用计算属性

computed: {
  getName: function() {
    return this.queryData.name
  }
}
watch: {
   getName: {
     handler: function() {
      //do something
     },
   }
}

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

Javascript 相关文章推荐
菜单效果
Oct 14 Javascript
用js统计用户下载网页所需时间的脚本
Oct 15 Javascript
window.onload 加载完毕的问题及解决方案(上)
Jul 09 Javascript
js获取url中的参数且参数为中文时通过js解码
Mar 19 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
Nov 25 Javascript
深入理解JS继承和原型链的问题
Dec 17 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
Bootstrap Table实现定时刷新数据的方法
Aug 13 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
简单了解Vue computed属性及watch区别
Jul 10 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 #Javascript
jsonp实现百度下拉框功能的方法分析
May 10 #Javascript
微信小程序用户授权,以及判断登录是否过期的方法
May 10 #Javascript
利用es6 new.target来对模拟抽象类的方法
May 10 #Javascript
Angular4.0动画操作实例详解
May 10 #Javascript
Angular 2使用路由自定义弹出组件toast操作示例
May 10 #Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 #Javascript
You might like
php生成扇形比例图实例
2013/11/06 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
php函数与传递参数实例分析
2014/11/15 PHP
Yii2实现UploadedFile上传文件示例
2017/02/15 PHP
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
用JS中split方法实现彩色文字背景效果实例
2016/08/24 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
vue cli3适配所有端方案的实现
2020/04/13 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
vue动态设置路由权限的主要思路
2021/01/13 Vue.js
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
pytyon 带有重复的全排列
2013/08/13 Python
Python中的localtime()方法使用详解
2015/05/22 Python
Python使用plotly绘制数据图表的方法
2017/07/18 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Django RBAC权限管理设计过程详解
2019/08/06 Python
Python 读取位于包中的数据文件
2020/08/07 Python
英国自行车商店:AW Cycles
2021/02/24 全球购物
第一批党的群众路线教育实践活动工作总结
2014/03/03 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
市场营销策划方案
2014/06/11 职场文书
安全责任书模板
2014/07/22 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
公司感谢信范文
2015/01/22 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
投诉书格式范本
2015/07/02 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
mysql查找连续出现n次以上的数字
2022/05/11 MySQL