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 相关文章推荐
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
js css 实现遮罩层覆盖其他页面元素附图
Sep 22 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
Mar 11 Javascript
JS之获取样式的简单实现方法(推荐)
Sep 13 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
js实现鼠标切换图片(无定时器)
Jan 27 Javascript
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
微信小程序获取用户信息并保存登录状态详解
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修正代码
2011/05/09 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
jQuery拖动布局其结果保存到数据库
2015/10/09 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
Mint UI实现A-Z字母排序的城市选择列表
2018/12/28 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
Python实例一个类背后发生了什么
2016/02/09 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
Python爬虫常用库的安装及其环境配置
2018/09/19 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
centos6.5安装python3.7.1之后无法使用pip的解决方案
2019/02/14 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
JPA的优势都有哪些
2013/07/04 面试题
大学生创业策划书
2014/02/02 职场文书
岗位职责怎么写
2014/03/14 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
明星邀请函
2015/02/02 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python