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 相关文章推荐
XML的代替者----JSON
Jul 21 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
Underscore源码分析
Dec 30 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
TypeScript入门-接口
Mar 30 Javascript
VueJS 集成 Medium Editor的示例代码 (自定义编辑器按钮)
Aug 24 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
Javascript幻灯片播放功能实现过程解析
May 07 Javascript
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 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 文件上传系统手记
2009/10/26 PHP
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
php Smarty date_format [格式化时间日期]
2010/03/15 PHP
PHP Zip压缩 在线对文件进行压缩的函数
2010/05/26 PHP
php的一些小问题
2010/07/03 PHP
php获取字段名示例分享
2014/03/03 PHP
Apache服务器下防止图片盗链的办法
2015/07/06 PHP
CI框架中数据库操作函数$this->db->where()相关用法总结
2016/05/17 PHP
基于PHPexecl类生成复杂的报表表头示例
2016/10/14 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
vue通过watch对input做字数限定的方法
2017/07/13 Javascript
浅谈Vue下使用百度地图的简易方法
2018/03/23 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
微信小程序中为什么使用var that=this
2019/08/27 Javascript
JavaScript进制转换实现方法解析
2020/01/18 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
Python 动态导入对象,importlib.import_module()的使用方法
2019/08/28 Python
利用Python校准本地时间的方法教程
2019/10/31 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
Kmeans均值聚类算法原理以及Python如何实现
2020/09/26 Python
Python的logging模块基本用法
2020/12/24 Python
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
工业学校毕业生自荐书
2014/01/03 职场文书
创业大赛策划书
2014/03/01 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python