解决Vue2.0 watch对象属性变化监听不到的问题


Posted in Javascript onSeptember 11, 2018

问题

很早之前就遇到一个问题,父组件向子组件传值,子组件监听传入对象的某个属性。发现子组件使用deep watch都不能观察到对象中属性的变化,今天终于找到为啥出现这种问题和解决办法了。

解决

为啥出现这种问题?受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。

请参照https://v1-cn.vuejs.org/guide/reactivity.html

解决方式:

通过vue的this.$set(object, key, value)方法

通过Object.assign()重新创建一个对象, 例如this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

代码实例

<template>
 <div>
 <p @click="fun1" style="color: blue">方式一</p>
 <p @click="fun2" style="color: blue">方式二</p>
 </div>
</template>

<script>
export default {
 data () {
 return {
  p: {a: 1}
 }
 },
 methods: {
 fun1 () {
  console.log('click 1111')
  // this.p.b = 2 // 通过点方法赋值,发现观察不到p的变化
  this.$set(this.p, 'b', 2) // 第一种解决方式,可以查看日志看到已经监听到了变化
 },
 fun2 () {
  console.log('click 2222')
  this.p = Object.assign({}, this.p, {c: 3})
 }
 },
 watch: {
 p: {
  handler (cval, oval) {
  console.log('--------')
  console.log(cval, oval)
  },
  deep: true
 }
 }
}
</script>

<style>

</style>

总结

个人推荐使用第二种解决方式,代码写起来更优雅。第一种解决方式如果有多个值会出现,多行$set()语句。

以上这篇解决Vue2.0 watch对象属性变化监听不到的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 Javascript
Javascript函数式编程语言
Oct 11 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
JavaScript基础心法 深浅拷贝(浅拷贝和深拷贝)
Mar 05 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
Vue数据绑定简析小结
May 07 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
详解webpack模块加载器兼打包工具
Sep 11 #Javascript
webpack css加载和图片加载的方法示例
Sep 11 #Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 #Javascript
webpack的CSS加载器的使用
Sep 11 #Javascript
JavaScript基础教程之如何实现一个简单的promise
Sep 11 #Javascript
Vue监听数据渲染DOM完以后执行某个函数详解
Sep 11 #Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
Sep 11 #Javascript
You might like
php教程之phpize使用方法
2014/02/12 PHP
CSS+jQuery实现的一个放大缩小动画效果
2013/09/24 Javascript
jQuery 中国省市两级联动选择附图
2014/05/14 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
javascript创建动态表单的方法
2015/07/25 Javascript
基于Bootstrap使用jQuery实现输入框组input-group的添加与删除
2016/05/03 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
解决循环中setTimeout执行顺序的问题
2018/06/20 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
React 实现车牌键盘的示例代码
2019/12/20 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
深入浅析Python中join 和 split详解(推荐)
2016/06/30 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
如何通过安装HomeBrew来安装Python3
2020/12/23 Python
matplotlib bar()实现多组数据并列柱状图通用简便创建方法
2021/02/24 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
正宗的澳大利亚Ugg靴子零售商:UGG Express
2020/04/19 全球购物
如何写毕业求职自荐信
2013/11/06 职场文书
策划助理岗位职责
2013/11/18 职场文书
工商管理毕业生推荐信
2013/12/24 职场文书
文员岗位职责范本
2014/03/08 职场文书
小学班主任寄语大全
2014/04/04 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
2015年妇产科工作总结
2015/05/18 职场文书
毕业生登记表班级意见
2015/06/05 职场文书
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android