vue.js watch经常失效的场景与解决方案


Posted in Vue.js onJanuary 07, 2021

使用过watch的,应该起码经历过一次失效。

比如,我们监听对象的时候,在没有踩坑之前,很容易这样写:

vue.js watch经常失效的场景与解决方案

但是,❌,这里的watch是无效的!!!

因为 obj 是引用类型!!!

引用类型的指针是固定的,所以如果不是重新赋值,那么其赋值的变量自然也不会发生变化。

举个例子:

let obj = { a: 1 };
let obj1 = obj;
let obj2 = { ...obj };
obj1.a = 2;
obj2.a = 3;
// 这里肯定是true,因为obj和obj1都是同一个指针,不明白的搜下引用类型
console.log(obj1 === obj);
// 这里肯定是false,因为指针不同
console.log(obj2 === obj);

怎么解决呢?也简单!

设置deep:true,这样obj中的属性发生变化(可被监测到的),便会执行 handler 函数;。

vue.js watch经常失效的场景与解决方案

!!!注意,因为是引用类型,所以newValue 和oldValue始终相等,千万不要犯傻的写相等就return,那就永远也不往下走了。。。。

监测数组

引用类型,除了对象,很容易想到数组,那数组是不是也需要这样写呢。
话分两头:

  • 数组项是对象类型,就需要deep
  • 数组项是值类型,就不需要deep

因为vue2里,数组被特殊处理了,跟 obj 不等同,所以需要分情况。

也就是数组项是值类型的话,直接这么写就行:

vue.js watch经常失效的场景与解决方案

对象类型的话,上面是不行的,先举个错误 ❌ 的例子:

vue.js watch经常失效的场景与解决方案

不打印的原理,依然是数组项是对象类型,想watch对象类型,必须加deep

正确做法 ✅:

watch:{
 arr: {
 handler(newValue) {
  // 这里就可以打印了
  console.log(newValue);
 },
 deep: true
 },
}

总结

watch失效的场景:

  • 对象类型
  • 数组项为对象类型的数组

解决方案:加deep:true。

watch的其他属性

总结

到此这篇关于vue.js watch经常失效的场景与解决方案的文章就介绍到这了,更多相关vue.js watch失效的场景与解决内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue绑定class的三种方法
Dec 24 Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 Vue.js
Vue 事件的$event参数=事件的值案例
Jan 29 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
vue elementUI批量上传文件
Apr 26 Vue.js
vue使用watch监听属性变化
Apr 30 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 #Vue.js
如何在vue-cli中使用css-loader实现css module
Jan 07 #Vue.js
vue3中轻松实现switch功能组件的全过程
Jan 07 #Vue.js
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 #Vue.js
详解Vue2的diff算法
Jan 06 #Vue.js
vuex的使用步骤
Jan 06 #Vue.js
vue3.0中友好使用antdv示例详解
Jan 05 #Vue.js
You might like
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
php实现的双向队列类实例
2014/09/24 PHP
PHP中应该避免使用同名变量(拆分临时变量)
2015/04/03 PHP
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
既简单又安全的PHP验证码 附调用方法
2016/06/02 PHP
在js中单选框和复选框获取值的方式
2009/11/06 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
JS自动适应的图片弹窗实例
2013/06/29 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
JavaScript移除数组内重复元素的方法
2015/03/18 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
wxPython中文教程入门实例
2014/06/09 Python
Python提取网页中超链接的方法
2016/09/18 Python
python web基础之加载静态文件实例
2018/03/20 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
python递归全排列实现方法
2018/08/18 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
python判断元素是否存在的实例方法
2020/09/24 Python
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
纪律教育学习月活动总结
2014/08/27 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
《正比例》教学反思
2016/02/23 职场文书
Python中glob库实现文件名的匹配
2021/06/18 Python
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python