关于vue中watch检测到不到对象属性的变化的解决方法


Posted in Javascript onFebruary 08, 2018

前言

在vue开发的过程中发现一个问题:改变vue.$data中对象的属性,watch是观测不到变化,但其实对象的属性是有变化的。这……,有点难以置信!

正文

<template>
 <div>
  <dl>name: {{option.name}}</dl>
  <dl>age: {{option.age}}</dl>
  <dl>
   <button @click="updateAgeTo25">update age with 25</button>
  </dl>
 </div>
</template>

<script>
export default {
 data () {
  return {
   option: {
    name: "isaac",
    age: 24
   }
  }
 },
 watch: {
  option(val) {
   console.log(val)
  }
 },
 methods: {
  updateAgeTo25() {
   this.option.age = 25
  }
 }
}
</script>

关于vue中watch检测到不到对象属性的变化的解决方法

关于vue中watch检测到不到对象属性的变化的解决方法

如结果所示,option.age已经更新,但是watch中的option函数并没有被触发。

vue的watch钩子会那么鸡肋?我是不信的了。

深层watch

...
 watch: {
  option: {
   handler(newVal) {
    console.log(newVal);
   },
   deep: true,
   immediate: true
  }
 },
 ...

需要深层watch就需要开启deep属性

关于vue中watch检测到不到对象属性的变化的解决方法

关于vue中watch检测到不到对象属性的变化的解决方法

如结果所示。

另外,你会发现,在age没有变化前也是有打印出option,这是因为开启immediate属性,设定为true,

该回调将会在侦听开始之后被立即调用

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

Javascript 相关文章推荐
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
js检查页面上有无重复id的实现代码
Jul 17 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
Vue.js 2.0 移动端拍照压缩图片预览及上传实例
Apr 27 Javascript
手动用webpack搭建第一个ReactApp的示例
Apr 11 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
扫微信小程序码实现网站登陆实现解析
Aug 20 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 Javascript
js实现点击烟花特效
Oct 14 Javascript
利用JavaScript写一个简单计算器
Nov 27 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 #Javascript
js中let和var定义变量的区别
Feb 08 #Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 #Javascript
VUE 使用中踩过的坑
Feb 08 #Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
Feb 08 #Javascript
在vue项目中使用element-ui的Upload上传组件的示例
Feb 08 #Javascript
vue中实现methods一个方法调用另外一个方法
Feb 08 #Javascript
You might like
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
php链式操作的实现方式分析
2019/08/12 PHP
jquery 实现表单验证功能代码(简洁)
2012/07/03 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
2018/09/04 Javascript
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
浅析Python编写函数装饰器
2016/03/18 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
如何在Django配置文件里配置session链接
2019/08/06 Python
python中下标和切片的使用方法解析
2019/08/27 Python
Python中的 ansible 动态Inventory 脚本
2020/01/19 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
Jupyter加载文件的实现方法
2020/04/14 Python
python变量的作用域是什么
2020/05/26 Python
python中altair可视化库实例用法
2021/01/26 Python
html5实现完美兼容各大浏览器的播放器
2014/12/26 HTML / CSS
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
意大利巧克力店:Chocolate Shop
2019/07/24 全球购物
保加利亚手表、香水、化妆品和珠宝购物网站:Brasty.bg
2020/04/22 全球购物
Java如何格式化日期
2012/08/07 面试题
怎样客观的做好自我评价
2013/12/28 职场文书
保护母亲河倡议书
2014/04/14 职场文书
公司踏青活动方案
2014/08/16 职场文书
自主招生英文自荐信
2015/03/25 职场文书
英语读书笔记
2015/07/02 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
Python基础详解之描述符
2021/04/28 Python