vue watch 无效,vue watch 不起作用

　　本文主要介绍了vue.js watch常见故障的场景和解决方法，通过示例代码进行了详细介绍，对您的学习或工作有一定的参考价值。让我们和边肖一起为有需要的朋友学习吧。

　　用过watch的人，应该都经历过至少一次失败。

　　例如，当我们监控一个对象时，很容易在踩坑之前写这个：

　　但是，这里的手表是无效的！

　　因为obj是引用类型！

　　被引用类型的指针是固定的，所以如果不重新赋值，它所赋给的变量自然不会改变。

　　例如：

　　let obj={ a:1 }；

　　设obj1=obj

　　设obj2={.obj }；

　　obj 1 . a=2；

　　obj 2 . a=3；

　　//这里一定是真的，因为obj和obj1都是同一个指针。如果不明白，搜索引用类型。

　　console . log(obj 1===obj)；

　　//这里必须是false，因为指针是不同的

　　console . log(obj 2===obj)；

　　怎么解决？也简单！

　　Set deep:true，这样当obj中的属性发生变化时会执行handler函数(可以监控)；

　　！请注意，因为它是引用类型，所以newValue和oldValue总是相等的。不要傻到写相等的字就返回，那你就永远下不去了。

监测数组

　　类型，除了对象，很容易想到数组，那么数组需要这样写吗？

　　文字分为两端：

　　数组项是一个对象类型，所以需要深度。

　　数组项是值类型，所以不需要深。

　　因为在vue2中，数组是经过特殊处理的，和obj不一样，需要分不同情况。

　　也就是说，如果数组项是值类型，只需按如下方式编写：

　　式，以上不行，我们举个错误的例子：

　　不打印的原则是数组项还是对象类型。如果要观察对象类型，必须添加深度。

　　正确做法：

　　观察：{

　　arr: {

　　处理程序(新值){

　　//你可以在这里打印。

　　console . log(new value)；

　　},

　　深：真的

　　},

　　}

总结

　　手表故障场景：

　　对象类型

　　数组项是对象类型的数组。

　　解：加深：真。

watch的其他属性

　　官方网站文档

　　如果需要一开始就执行watch，可以使用immediate属性。

　　句柄可以是数组。

　　如果你取消手表，这个。$取消观看

　　监视对象“obj . key”(){ }的一个属性

　　如果你想同时检测两个属性，又懒得一个一个写，有一个偷懒的办法，用computed做中间层。

　　计算值：{

　　全名(){ return this . first name this . last name }

　　},

　　观察：{

　　全名(){.}

　　}

引用

　　手表的使用

总结

　　这篇关于vue.js watch经常出现故障的场景和解决方法的文章到此为止。更多vue.js watch故障的场景和解决方案，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。