一、Vue刷新页面
在使用Vue的过程中，页面的刷新操作是一个必不可少的环节。Vue提供了多种方法来进行页面刷新。
1、使用location.reload()方法：
location.reload();
该方法会重新加载当前页面，但是会忽略浏览器缓存，并重新请求资源，因此速度较慢。
2、通过添加时间戳来避免页面缓存:
var timestamp = (new Date()).valueOf(); window.location.href = window.location.href + '?' + timestamp;
该方法为当前url添加时间戳，以保证每次请求都是唯一的。这种方法相对于location.reload()的方法，速度稍快，但是url的变化可能会影响一些网站的功能。
3、使用Vue Router提供的API来进行页面刷新：
this.$router.go(0);
该方法会重新渲染当前路由的组件，并刷新页面，但是不会重新请求资源。
二、Vue组件刷新办法
如果需要刷新某个特定的组件，Vue也提供了多种方法来实现。
1、通过修改数据属性来实现：
this.$set(this.data, 'key', value);
这种方式会触发组件的重新渲染，从而实现组件的刷新。
2、通过使用Vue的watch来监听数据的变化，从而实现组件的刷新：
watch: {
data: function(newVal, oldVal) {
this.initData();
}
}
这种方式会在数据属性发生变化时，触发组件的刷新。
三、Vue刷新UI
当数据变化时，往往需要更新UI，Vue也提供了多种方法来实现。
1、手动调用$forceUpdate()方法：
this.$forceUpdate();
该方法会强制组件重新渲染，从而实现UI的刷新。
2、使用Vue提供的v-bind绑定class和style来实现：
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/198002.html
微信扫一扫 
支付宝扫一扫 