详解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 相关文章推荐
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
举例详解JavaScript中Promise的使用
Jun 24 Javascript
轻松学习jQuery插件EasyUI EasyUI表单验证
Dec 01 Javascript
JavaScript中定义类的方式详解
Jan 07 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
vue2.0模拟锚点的实例
Mar 14 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
JavaScript实现图片合成下载的示例
Nov 19 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
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
PHP7修改的函数
2021/03/09 PHP
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
2013/10/23 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
JavaScript定义类和对象的方法
2014/11/26 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
2016/05/16 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
Angular2中如何使用ngx-translate进行国际化
2017/05/21 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
Vue组件基础用法详解
2020/02/05 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
Python3实战之爬虫抓取网易云音乐的热门评论
2017/10/09 Python
解决python字典对值(值为列表)赋值出现重复的问题
2019/01/20 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
python登录WeChat 实现自动回复实例详解
2019/05/28 Python
python实现小世界网络生成
2019/11/21 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Python对wav文件的重采样实例
2020/02/25 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
尤妮佳moony海外旗舰店:日本殿堂级纸尿裤品牌
2018/02/23 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
计算机专业大学生的自我评价
2013/11/14 职场文书
求职信的七个关键技巧
2014/02/05 职场文书
企业消防安全责任书
2014/07/23 职场文书
报到证办理个人委托书
2014/10/06 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
党支部工作总结2015
2015/04/01 职场文书
2016年过年放假安排通知
2015/08/18 职场文书