解决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 相关文章推荐
通过隐藏option实现select的联动效果
Nov 10 Javascript
Jquery时间轴特效(三种不同类型)
Nov 02 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
JS实现Ajax的方法分析
Dec 20 Javascript
简单实现js倒计时功能
Feb 13 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
javascript+css实现俄罗斯方块小游戏
Jun 28 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
vue 单页应用和多页应用的优劣
Oct 22 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 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
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
php array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
2013/11/19 Javascript
js定时调用方法成功后并停止调用示例
2014/04/08 Javascript
javascript中局部变量和全局变量的区别详解
2015/02/27 Javascript
全面解析Bootstrap排版使用方法(标题)
2015/11/30 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
解析js如何获取css样式
2016/12/11 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
2017/03/25 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
python抽取指定url页面的title方法
2018/05/11 Python
python实现任意位置文件分割的实例
2018/12/14 Python
Python数据预处理之数据规范化(归一化)示例
2019/01/08 Python
python读写csv文件实例代码
2019/07/05 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
python 工具 字符串转numpy浮点数组的实现
2020/03/14 Python
利用python在excel中画图的实现方法
2020/03/17 Python
ITK 实现多张图像转成单个nii.gz或mha文件案例
2020/07/01 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
美国唇部护理专家:Sara Happ
2019/06/19 全球购物
农业资源与环境专业自荐信范文
2013/12/30 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
农业项目建议书
2014/08/25 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
民间借贷被告代理词
2015/05/23 职场文书