作者:田字格 | 来源:互联网 | 2023-10-11 19:56
vue中$forceUpdate的使用登录 2019-03-28 简单总浏览:46今日浏览:4vue中的$forceUpdate是强制更新的意思,之前没太怎么用过,最近看了下,觉得
vue中$forceUpdate的使用
登录 2019-03-28 简单总浏览:46今日浏览:4
vue中的$forceUpdate是强制更新的意思,之前没太怎么用过,最近看了下,觉得还挺有意思的,一起来看看是咋用的。
深结构数据
首先我们知道在vue中,数据的绑定都不用我们操心,例如在data中有一个msg的变量,你修改它,那么在页面上,msg的内容就会自动发生变化。但是如果对于一个复杂的对象,例如一个对象数组,你直接去给数组上某一个元素增加属性,或者直接把数组的length变成0,vue就无法知道发生了改变。
=> vue无法感知的数据变动(二维码)
上面的demo就是一个对象数组,我们尝试直接给某个item增加一个属性,发现页面上没有效果;直接将length变成0来清空数组,也没有效果,关键代码如下:
- change: function(index) {
- this.list[index].sex = ‘男‘;
- },
- clear: function() {
- this.list.length = 0;
- }
其实呢,上面的写法没有效果,是因为没有按照vue的规范去写,因为vue文档里面写了,对于深层的,最好用$set方法,这样vue就可以知道发生了变化,同时vue也不建议直接修改length,可以给一个空数组来置空。
=> 深层用$set去设置(二维码)
上面是我们按照vue的规范去写的,是可以实现变化的,关键代码如下:
- change: function(index) {
- this.$set(this.list[index],‘sex‘,‘男‘)
- },
- clear: function() {
- this.list=[];
- }
可是如果我们不想利用$set去设置,非要按照我们第一种方式去写,可以实现么?答案是可以的,就是利用$forceUpdate了,因为你修改了数据,但是页面层没有变动,说明数据本身是被修改了,但是vue没有监听到而已,用$forceUpdate就相当于按照最新数据给渲染一下。
=> 利用$forceUpdate更新(二维码)
关键代码如下:
- change: function(index) {
- this.list[index].sex = ‘男‘;
- this.$forceUpdate();
- },
- clear: function() {
- this.list.length = 0;
- this.$forceUpdate();
- }
$children
$children表示当前页面的组件个数,但是如果直接在页面上引用{{$children}},往往得不到正确的结果:
=> 如何显示$children个数(二维码)
这个和vue内部的实现机制有关,(vue不同版本可能不一定有此问题),可以看到,当我们用$forceUpdate之后,就会得到正确的结果。当然,一般我们也不会这么去使用,我们可以在data里面定义一个变量,在mounted之后给变量赋值this.$children.length;或者直接在mounted之后使用$forceUpdate强制刷新。