详解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 相关文章推荐
使用jquery mobile做幻灯播放效果实现步骤
Jan 04 Javascript
jQuery隔行变色与普通JS写法的对比
Apr 21 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
Apr 23 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
详解vue中使用protobuf踩坑记
May 07 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
Jan 06 Javascript
给原生html中添加水印遮罩层的实现示例
Apr 02 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
PHP syntax error, unexpected $end 错误的一种原因及解决
2008/10/25 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
jquery 经典动画菜单效果代码
2010/01/26 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
使用JS读秒使用示例
2013/09/21 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
2016/06/21 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
JS中的作用域链
2017/03/01 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
vue实现的封装全局filter并统一管理操作示例
2020/02/02 Javascript
python zip文件 压缩
2008/12/24 Python
Python学习笔记之常用函数及说明
2014/05/23 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
python梯度下降法的简单示例
2018/08/31 Python
Keras搭建自编码器操作
2020/07/03 Python
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
类成员函数的重载、覆盖和隐藏区别
2016/01/27 面试题
计算机操作自荐信
2013/12/07 职场文书
汽车专业学生自我评价
2014/01/19 职场文书
故意伤害人身损害赔偿协议书
2014/11/19 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android