关于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 相关文章推荐
javascript 广告后加载,加载完页面再加载广告
Nov 25 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
jQuery实现ctrl+enter(回车)提交表单
Oct 19 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
Node.js Addons翻译(C/C++扩展)
Jun 12 Javascript
ASP.NET jquery ajax传递参数的实例
Nov 02 Javascript
jQuery对table表格进行增删改查
Dec 22 Javascript
jQuery extend()详解及简单实例
May 06 jQuery
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
Vue.js实现的购物车功能详解
Jan 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实例分享之通过递归实现删除目录下的所有文件详解
2014/05/15 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
javascript 写类方式之二
2009/07/05 Javascript
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
JS操作Cookies的小例子
2013/10/15 Javascript
用console.table()调试javascript
2014/09/04 Javascript
jQuery右侧选项卡焦点图片轮播特效代码分享
2015/09/05 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
从零开始封装自己的自定义Vue组件
2018/10/09 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
爬山算法简介和Python实现实例
2014/04/26 Python
github配置使用指南
2014/11/18 Python
Python中int()函数的用法浅析
2017/10/17 Python
Python_LDA实现方法详解
2017/10/25 Python
Python 读取图片文件为矩阵和保存矩阵为图片的方法
2018/04/27 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
Django中多种重定向方法使用详解
2019/07/17 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
Python并发concurrent.futures和asyncio实例
2020/05/04 Python
Numpy(Pandas)删除全为零的列的方法
2020/09/11 Python
Carter’s OshKosh加拿大:购买婴幼儿服装和童装
2018/11/27 全球购物
捷科时代的软件测试笔试题
2015/11/09 面试题
工程项目经理岗位职责
2013/12/15 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
师范类求职信
2014/06/21 职场文书
售房协议书
2014/08/19 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
餐厅服务员岗位职责
2015/02/09 职场文书
教育教学读书笔记
2015/07/02 职场文书
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技