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 相关文章推荐
jquery中防刷IP流量软件影响统计的一点对策
Jul 10 Javascript
window.requestAnimationFrame是什么意思,怎么用
Jan 13 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
DWR中各种java方法的调用
May 04 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
JS实现的简单折叠展开动画效果示例
Apr 28 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
vue+elementUI动态生成面包屑导航教程
Nov 04 Javascript
vscode中Vue别名路径提示的实现
Jul 31 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
无JS,完全php面向过程数据分页实现代码
2012/08/27 PHP
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
php实现的中秋博饼游戏之掷骰子并输出结果功能详解
2017/11/06 PHP
jQuery性能优化的38个建议
2014/03/04 Javascript
jquery中 $.expr使用实例介绍
2014/06/09 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
2015/01/29 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
require.js的用法详解
2015/10/20 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
js实现移动端轮播图
2020/12/21 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
解决antd日期选择组件,添加value就无法点击下一年和下一月问题
2020/10/29 Javascript
Python牛刀小试密码爆破
2011/02/03 Python
Python中使用ConfigParser解析ini配置文件实例
2014/08/30 Python
跟老齐学Python之Python安装
2014/09/12 Python
Python编程之Re模块下的函数介绍
2017/10/28 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
Flask框架重定向,错误显示,Responses响应及Sessions会话操作示例
2019/08/01 Python
解决Django layui {{}}冲突的问题
2019/08/29 Python
如何基于python实现年会抽奖工具
2020/10/20 Python
python中温度单位转换的实例方法
2020/12/27 Python
如何用python 操作zookeeper
2020/12/28 Python
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
JAVA和C++区别都有哪些
2015/03/30 面试题
外贸业务员求职信范文
2013/12/12 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
会议主持人开场白台词
2015/05/28 职场文书
Python道路车道线检测的实现
2021/06/27 Python