解决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 相关文章推荐
IE浏览器PNG图片透明效果代码
Sep 02 Javascript
Extjs Ajax 乱码问题解决方案
Apr 15 Javascript
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
js+html5实现复制文字按钮
Jul 15 Javascript
微信小程序 冒泡事件原理解析
Sep 27 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
Dec 01 Javascript
Vue绑定用户接口实现代码示例
Nov 04 Javascript
如何在vue 中使用柱状图 并自修改配置
Jan 21 Vue.js
JS canvas实现画板和签字板功能
Feb 23 Javascript
详解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
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
PHP SPL标准库之数据结构栈(SplStack)介绍
2015/05/12 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
PHPstorm激活码2020年5月13日亲测有效
2020/09/17 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
JavaScript中几种排序算法的简单实现
2015/07/29 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
Angular1.x自定义指令实例详解
2017/03/01 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
javaScript字符串工具类StringUtils详解
2017/12/08 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
2019/05/13 jQuery
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
Python获取服务器信息的最简单实现方法
2015/03/05 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
python3实现ftp服务功能(服务端 For Linux)
2017/03/24 Python
python实现合并两个排序的链表
2019/03/03 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
关于Python解包知识点总结
2020/05/05 Python
Python中内建模块collections如何使用
2020/05/27 Python
Notino法国:购买香水和化妆品
2019/04/15 全球购物
什么是Oracle的后台进程background processes?都有哪些后台进程?
2012/04/26 面试题
运动会通讯稿50字
2014/01/30 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL
Spring Cloud OAuth2实现自定义token返回格式
2022/06/25 Java/Android