详解Vue中watch对象内属性的方法


Posted in Javascript onFebruary 01, 2019

vue提供了watch方法,用于监听实例内data数据的变化。通常写法是:

new Vue({
 data: {
  count: 10,
  blog:{
    title:'my-blog',
    categories:[]
  }
 },
 watch: {
  count: function (newval, oldVal) {
   console.log(`new: %s, old: %s`, newVal, oldVal);
  }
 }
})

上述情况里data中的count属性可以直接监听,但是如果需要监听的数据是对象内的某一属性值的变化,直接watch对象blog是检测不到变化的,这是因为blog这个对象的指向并没有发生改变。有几个解决方法

1.深度监测

new Vue({
 data: {
  count: 10,
  blog:{
    title:'my-blog',
    categories:[]
  }
 },
 watch: {
  blog:{
    handler(newVal,oldVal){
      console.log(`new: ${newVal}, old: ${oldVal}`);
    },
    deep:true
  }
 }
})

里面的deep设为了true,这样的话,如果修改了这个blog中的任何一个属性,都会执行handler这个方法。不过这样会造成更多的性能开销,尤其是对象里面属性过多,结构嵌套过深的时候。而且有时候我们就只想关心这个对象中的某个特定属性,这个时候可以这样

2.用字符串来表示对象的属性调用

new Vue({
 data: {
  count: 10,
  blog:{
    title:'my-blog',
    categories:[]
  }
 },
 watch: {
  'blog.categories'(newVal, oldVal) {
    console.log(`new:${newVal}, old:${oldVal}`);
  }, 
 }
})

3.使用computed计算属性

new Vue({
 data: {
  count: 10,
  blog:{
    title:'my-blog',
    categories:[]
  }
 },
 computed: {
  categories() {
   return this.blog.categories;
  }
 },
 watch: {
  categories(newVal, oldVal) {
   console.log(`new:${newVal}, old:${oldVal}`);
  }, 
 },
})

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

Javascript 相关文章推荐
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
js opener的使用详解
Jan 11 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
jQuery实现在列表的首行添加数据
May 19 Javascript
javascript表单验证大全
Aug 12 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
Oct 11 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 #Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 #Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 #Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 #Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 #Javascript
JS栈stack类的实现与使用方法示例
Jan 31 #Javascript
JQuery中queue方法用法示例
Jan 31 #jQuery
You might like
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
php array_intersect()函数使用代码
2009/01/14 PHP
php中memcache 基本操作实例
2015/05/17 PHP
新鲜出炉的js tips提示效果
2011/04/03 Javascript
jQuery ui插件的使用方法代码实例
2013/05/08 Javascript
JS实现可改变列宽的table实例
2013/07/02 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
JavaScript的字符串方法汇总
2016/07/31 Javascript
Bootstrap菜单按钮及导航实例解析
2016/09/09 Javascript
IONIC自定义subheader的最佳解决方案
2016/09/22 Javascript
jQuery制作input提示内容(兼容IE8以上)
2017/07/05 jQuery
vue+vux实现移动端文件上传样式
2017/07/28 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
[01:38]DOTA2辉夜杯 欢乐的观众现场采访
2015/12/26 DOTA
Python设计模式之代理模式实例
2014/04/26 Python
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
Python socket编程实例详解
2015/05/27 Python
python3 与python2 异常处理的区别与联系
2016/06/19 Python
PyQt5重写QComboBox的鼠标点击事件方法
2019/06/25 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
Python实现代码块儿折叠
2020/04/15 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
2014年幼儿园植树节活动方案
2014/03/02 职场文书
同居协议书范本
2014/04/23 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
招商引资工作汇报材料
2014/10/28 职场文书
退休职工欢送会致辞
2015/08/01 职场文书
实战Python爬虫爬取酷我音乐
2022/04/11 Python