详解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实现网站超链接和图片提示效果
Mar 21 Javascript
使用javascript实现有效时间的控制,并显示将要过期的时间
Jan 02 Javascript
js判断字符是否是汉字的两种方法小结
Jan 03 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
jQuery Datatable 多个查询条件自定义提交事件(推荐)
Aug 24 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
vue-cli 自定义指令directive 添加验证滑块示例
Oct 19 Javascript
详解vue使用插槽分发内容slot的用法
Mar 28 Javascript
vue如何获取自定义元素属性参数值的方法
May 14 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
微信小程序实现滚动Tab选项卡
Nov 16 Javascript
详解CocosCreator消息分发机制
Apr 16 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
smarty模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
php专用数组排序类ArraySortUtil用法实例
2015/04/03 PHP
PHP自带方法验证邮箱是否存在
2016/02/01 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
基于jQuery的获得各种控件Value的方法
2010/11/19 Javascript
基于jquery实现的表格分页实现代码
2011/06/21 Javascript
解决遍历时Array.indexOf产生的性能问题
2012/07/03 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解
2014/11/19 Javascript
JavaScript中使用Math.PI圆周率属性的方法
2015/06/14 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
深入理解JavaScript中的预解析
2017/01/04 Javascript
BootStrap与Select2使用小结
2017/02/17 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
Node.js文件编码格式的转换的方法
2018/04/27 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
javascript实现画板功能
2020/04/12 Javascript
Vue props中Object和Array设置默认值操作
2020/07/30 Javascript
Django urls.py重构及参数传递详解
2019/07/23 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
在python3中实现更新界面
2020/02/21 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
Python实现查找数据库最接近的数据
2020/06/08 Python
CSS3中的content属性使用示例
2015/07/20 HTML / CSS
自我鉴定200字
2013/10/28 职场文书
教师见习期自我鉴定
2014/04/28 职场文书
环保项目建议书
2014/08/26 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
2014年创卫工作总结
2014/11/24 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
党支部承诺书
2015/01/20 职场文书
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python