亲宝软件园·资讯

展开

$forceUpdate解析

yerikyu 人气:0

在vue的开发过程中,数据的绑定通常来说都不用我们操心,例如在​​data​​中有一个​​msg​​的变量,只要修改它,那么在页面上,​​msg​​的内容就会自动发生变化。但是如果对于一个复杂的对象,例如一个对象数组,直接去给数组上某一个元素增加属性,或者直接把数组的​​length​​变成0,vue可能就无法知道发生了改变。这个其实就是考验对于双向绑定的更进一步的理解应用了。
在Vue中,双向绑定属于自动档,然而在特定的情况下,需要手动触发“刷新”操作,目前有四种方案可以选择:

方案分析

本次文章主要重点在于分析​​forceUpdate​​这个方法,后续有机会再来分析​​key-changing​​。

forceUpdate

该方案是比较好的一种方式,比如说我们尝试直接给某个​​object​​增加一个属性,发现页面上没有效果;直接将length变成0来清空数组,也没有效果,

关键代码如下:

change: function(index) {
// 增加性格属性
this.girls[idx].character = 'lovely';
},
clear: function() {
// 清空数组
this.girls.length = 0;
}

按照上面的写法没有产生想要的效果,是因为没有按照vue的规范去写,因为文档里面写了,对于深层的,最好用$set方法,这样vue就可以知道发生了变化,同时vue也不建议直接修改length,而是给一个空数组来置空。
如果我们按照vue的规范去写的,是可以实现变化的,

关键代码如下:

change: function(index) {
// 增加性格属性
this.$set(this.girls[idx],'character','lovely')
},
clear: function() {
// 清空数组
this.girls = [];
}

如果我们不想利用​​$set​​去设置,非要按照我们第一种方式去写,可以实现么?可以的,就是利用​​$forceUpdate​​,此时修改了数据,然而页面层没有变动,之后通过日志打印的方式确认数据是否有修改过,之后再确认有没有监听到,用​​$forceUpdate​​就相当于按照最新数据给渲染一下。

关键代码如下:

change: function(index) {
this.girls[idx].character = '男';
this.$forceUpdate();
},
clear: function() {
this.girls.length = 0;
this.$forceUpdate();
}

这种做法实际上并不推荐,官方说如果你现在的场景需要用​​forceUpdate​​方法 ,那么99%是你的操作有问题,如上data里不显示声明对象的属性,之后添加属性时正确的做法时用 ​​$set()​​方法,所以​​forceUpdate​​请慎用。
该同等效果的:window.location.reload()

本质

在vue的官方文档中有说明到这个是一个强制刷新的api,但很少用到,除非是遇到了需要实时响应组件状态的时候

Force the component instance to re-render.

This should be rarely needed given Vue's fully automatic reactivity system. The only cases where you may need it is when you have explicitly created non-reactive component state using advanced reactivity APIs.

实现原理

Vue.prototype.$forceUpdate = function () {
const vm: Component = this
if (vm._watcher) {
vm._watcher.update()
}
}

实例需要重新渲染是在依赖发生变化的时候会通知​​watcher​​,然后通知​​watcher​​来调用​​update​​方法,就是这么简单。

分析

forceUpdate就是重新render

这些时候都可以手动调用 forceUpdate 自动触发 render 。所以建议使用​​ immutable​​来操作​​ state​​ ,​​redux​​ 等​​ flux​​ 架构来管理​​ state​​。

刷新页面

这个方案是挺low的,本质上是刷新页面

this.$router.go(0)

使用v-if标记

如果是刷新某个子组件,则可以通过​​v-if​​指令实现。我们知道,当​​v-if​​的值发生变化时,组件都会被重新渲染一遍。因此,利用​​v-if​​指令的特性,可以达到强制刷新组件的目的。

<template>
<compare v-if="refresh"></compare>
<el-button @click="refreshComp()">刷新comp组件</el-button>
</template>
<script>
import compare from '@/views/compare.vue'
export default {
name: 'parentComp',
data() {
return {
refresh: true
}
},
methods: {
refreshComp() {
// 移除组件
this.refresh = false
// 在组件移除后,重新渲染组件
// this.$nextTick可实现在DOM 状态更新后,执行传入的方法。
this.$nextTick(() => {
this.refresh = true
})
}
}
}
</script>

key-changing

原理很简单,vue使用key标记组件身份,当key改变时就是释放原始组件,重新加载新的组件。

<template>
<div>
<span :key="key"></span>
</div>
</template>
<script>
export default {
data() {
return {
key: 0
}
},
methods: {
handleUpdateClick() {
this.key += 1 // 或者 this.key = new Date();
}
}
}
</script>

加载全部内容

相关教程
猜你喜欢
用户评论