关于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源码不错的工具
Dec 26 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
通过js来制作复选框的全选和不选效果
May 22 Javascript
canvas实现手机端用来上传用户头像的代码
Oct 20 Javascript
vue实现图片加载完成前的loading组件方法
Feb 05 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
重新认识vue之事件阻止冒泡的实现
Aug 02 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
Vue开发中遇到的跨域问题及解决方法
Feb 11 Javascript
JS替换字符串中指定位置的字符(多种方法)
May 28 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中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
Javascript浅谈之引用类型
2013/12/18 Javascript
jQuery选择器简明总结(含用法实例,一目了然)
2014/04/25 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
很棒的js选项卡切换效果
2016/07/15 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
vue.js异步上传文件前后端实现代码
2017/08/22 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
2018/03/05 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
python实现探测socket和web服务示例
2014/03/28 Python
Python中的fileinput模块的简单实用示例
2015/07/09 Python
Python小进度条显示代码
2019/03/05 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
使用Python测试Ping主机IP和某端口是否开放的实例
2019/12/17 Python
对python中arange()和linspace()的区别说明
2020/05/03 Python
纯CSS实现菜单、导航栏的3D翻转动画效果
2014/04/23 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
优秀毕业生自我鉴定
2014/01/19 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
MySql学习笔记之事务隔离级别详解
2021/05/12 MySQL
nginx配置限速限流基于内置模块
2022/05/02 Servers
python playwrigh框架入门安装使用
2022/07/23 Python