vue中$forceUpdate的使用

vue 496849654@qq.com 1年前 (2020-07-18) 857次浏览 0个评论

vue中的$forceUpdate是强制更新的意思,之前没太怎么用过,最近看了下,觉得还挺有意思的,一起来看看是咋用的。
深结构数据
首先我们知道在vue中,数据的绑定都不用我们操心,例如在data中有一个msg的变量,你修改它,那么在页面上,msg的内容就会自动发生变化。但是如果对于一个复杂的对象,例如一个对象数组,你直接去给数组上某一个元素增加属性,或者直接把数组的length变成0,vue就无法知道发生了改变。

demo代码如下:

<div id="app">
<div v-for="(item,index) in list"><span>姓名:{{item.name}}</span> <span>年龄:{{item.age}}</span> <button @click="change(index)">增加性别显示</button></div>

<button>全部清空</button>
</div>
<script>
		const app = new Vue({
			el: '#app',
			data: {
				list: [{
					name: '张三',
					age: '20'
				}, {
					name: '李四',
					age: '21'
				}, {
					name: '王五',
					age: '22'
				}]
			},
			methods: {
				change: function(index) {
					this.list[index].sex = '男';
//					this.$forceUpdate();
				},
				clear: function() {
					this.list.length = 0;
//					this.$forceUpdate();
				}
			}
		})
	</script>

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的规范去写的,是可以实现变化的,关键代码如下:

hange: 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();
}

css315 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:vue中$forceUpdate的使用
喜欢 (2)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址