在之前写项目的时候, 就遇到了一次层次嵌套比较深, 修改其中一个值, 视图不更新, 那时候着急完成项目, 并没有怎么注意, 最近在写的项目中又遇到了这样的问题, 所以这次就这个问题, 写一下$set的用法。
在写的这个项目中, 需要对详情里面的details数组中的某一项进行修改, 视图不更新, 在此, 我们就需要查看Vue有没有提供什么样的写法来解决视图不更新的问题。经过查找, 最终, 我还是选择了局部强制刷新的写法$set来解决我们的问题。
我们看一下官方的描述
看完之后, 我们其实就大概知道如何使用了, 在使用前, 我们来说一下为什么视图不会实时更新。我们都知道在vue中, data声明的属性都是响应式的, 我们一般修改data中的属性, 都会做到实时更新, 但是呢, 由于JavaScript的限制, Vue不能检测数组和对象的变化, 比如我们对data声明的数组属性或者对象属性进行修改, 就无法响应式的更新我们的页面, 所以, 就比如我通过数组索引去赋值新数组, 就不会触发页面的更新了。在了解完页面不更新的原因之后, 我们写一个页面来演示一下$set的用法
上面的页面就写好了, 我们采用数组[索引]的写法来对该数组进行赋值, 这时候, 页面就不会实时更新了
这时候, 我们发现值更新了, 但是视图并没有更新, 我们就使用$set的写法, 更新一下我们的视图
用了$set的写法, 我们可能并不知道里面传递的参数是什么意思, 接下来, 我来给大家介绍一下, 第一个参数是你需要修改那个数组或者对象, 第二个参数是数组的下标或者对象的属性名, 第三个就是改变后的新值
今天虽然, 就写了一个根据数组索引进行赋值, 不会触发视图更新, 其实还有很多, 比如我们修改数组的长度也不会触发视图的更新
我们来看一下对象写法视图不更新的情况
我们使用对象[‘age’]的方法添加了一个新值, 但是我们打印出来了, 视图并没有更新。所以, 我们还是采用Vue提供的$set方法去更新一下我们的视图
这样使用$set方法之后, 发现添加的age属性也具备了get和set方法
想必大家通过阅读此篇文章, 就学会了通过$set来解决类似的视图不更新问题
今天, 我们就先讲解到这里, 我们下期见
