vue.js中观察失效如何解决

　　

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

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

vue.js中观察失效如何解决

但是,?,这里的手表是无效的! ! !

因为obj是引用类型! ! !

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

举个例子:

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

怎么解决呢?也简单!

设置深:没错,这样obj中的属性发生变化(可被监测到的),便会执行处理函数;。

vue。js中观察失效如何解决

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

监测数组

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

<李>

数组项是对象类型,就需要深

<李>

数组项是值类型,就不需要深

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

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

vue。js中观察失效如何解决

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

vue。js中观察失效如何解决

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

正确做法?:

看:{ 　　,加勒比海盗:{ 　　,处理程序(newValue) {//才能,这里就可以打印了 　　console.log才能(newValue); 　　}, 　　,深:真的 　　}, 　　}

总结

看失效的场景:

<李>

对象类型

<李>

数组项为对象类型的数组

解决方案:加深:真的。

看的其他属性

官网文档

<李>

一开始就需要执行看的话,可立即属性

<李>

处理可以是一个数组

<李>

取消看的话,这个。美元unwatch

<李>

看对象的某个属性的话,& # 39;obj.key& # 39; () {}

<李>

如果想同时检测两个属性,懒得一个个写的话,有个偷懒的法子用计算做中间层。

计算:{ 　　,fullName () {return  this.firstName  +, this.lastName} 　　}, 　　看:{ 　　,fullName () {…} 　　}

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注行业资讯频道,感谢您对的支持。

vue.js中观察失效如何解决