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-cli 创建模板项目
Nov 19 Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
vue 导航守卫和axios拦截器有哪些区别
Dec 19 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
vue3中provide && inject的使用
Jul 01 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue判断按钮是否可以点击
Apr 09 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+mysql实现数据库随机重排实例
2014/10/17 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
js下用eval生成JSON对象
2010/09/17 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
JS功能代码集锦
2016/05/04 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
2019/09/23 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
python 获取文件列表(或是目录例表)
2009/03/25 Python
python数据结构之图的实现方法
2015/07/08 Python
Python3中的真除和Floor除法用法分析
2016/03/16 Python
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
2016/03/15 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
Shoes For Crews法国官网:美国领先的防滑鞋设计和制造商
2018/01/01 全球购物
Ralph Lauren英国官方网站:Ralph Lauren UK
2018/04/03 全球购物
计算机网络毕业生自荐信
2013/10/01 职场文书
电脑租赁公司创业计划书
2014/01/08 职场文书
楼面经理岗位职责范本
2014/02/18 职场文书
计算机毕业生自荐信范文
2014/03/23 职场文书
教师党员承诺书
2014/03/25 职场文书
开展读书活动总结
2014/06/30 职场文书
人事主管岗位职责
2015/02/04 职场文书
自荐信怎么写
2015/03/04 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
基于Python实现nc批量转tif格式
2022/08/14 Python