详解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 相关文章推荐
从新浪弄下来的全屏广告代码 与使用说明
Mar 15 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
javascript 节点排序 2
Jan 31 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
javascript为下拉列表动态添加数据项
May 23 Javascript
JavaScript数据类型详解
Apr 01 Javascript
javascript history对象详解
Feb 09 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 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
CI框架给视图添加动态数据
2014/12/01 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
php curl模拟post请求和提交多维数组的示例代码
2015/11/19 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
Node.js+Express配置入门教程
2016/05/19 Javascript
js图片切换具体实现代码
2016/10/13 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
详解如何用webpack4从零开始构建react开发环境
2019/01/27 Javascript
js实现全选和全不选
2020/07/28 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
python正则表达式re之compile函数解析
2017/10/25 Python
python unittest实现api自动化测试
2018/04/04 Python
Python enumerate函数功能与用法示例
2019/03/01 Python
python学习开发mock接口
2019/04/28 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
Django 批量插入数据的实现方法
2020/01/12 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
大学毕业寄语大全
2014/04/10 职场文书
简单租房协议书(范本)
2014/10/13 职场文书
公司市场部岗位职责
2015/04/15 职场文书
幼儿园教师安全责任书
2015/05/08 职场文书
公司辞职信模板
2015/05/13 职场文书
文明和谐家庭事迹材料(2016精选版)
2016/02/29 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL