一、this.$forceUpdate()
原理:
// 作用:迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。
// 实例需要重新渲染是在依赖发生变化的时候会通知watcher,然后通知watcher来调用update方法,就是这么简单。
Vue.prototype.$forceUpdate = function () {
const vm: Component = this
if (vm._watcher) {
vm._watcher.update()
}
}
实例:
getAddress () {
this.data.forEach(item => {
if (item.id === this.value) {
this.addressInfo = item
}
})
this.$forceUpdate()
},
二、this.$set()
dialogFormData: {
logoUrl: '',
logoCode: '',
},
直接赋值不能渲染,
$set方法解决:
toRequest(data) {
// 发起请求
const fd = new FormData();
fd.append('file', data.file);
this.$axios({
method: 'post',
url: fileUpload,
headers: { 'Content-Type': 'multipart/form-data' },
data: fd,
}).then((res) => {
this.$set(this.dialogFormData,'logoUrl',res.data.payload)
this.$message({ type: 'success', message: '上传成功' });
});
},
可以了:
三、:key
相当于每次都是用了新组件,解决了渲染问题
在data里定义key
// 在data里边定义key
key: new Date().getTime()
// 在组件里边使用key
<formPicker
v-if="form.effectiveness === '否'"
title="结束时间"
type="date"
:key="key"
:value="form.endDate"
:minDate="minDate"
:maxDate="maxDate"
:required="true"
placeholder="请选择有效期结束时间"
@onConfirm="onConfirm($event,'end')">
</formPicker>
四、setTimeout()
// 方法
export function sleep (time) {
return new Promise(resolve => {
setTimeout(() => {
resolve()
}, time)
})
}
// 引入
import { formatTime, sleep } from '@/utils/index'
// 使用
sleep(500)
五、this.$nexttick(()=>{})
handleSelectionChange(selection,row) {
this.$refs.singleTable.$refs.table.clearSelection()
if (row) {
this.$nextTick(() => {
this.$refs.singleTable.$refs.table.toggleRowSelection(row, true)
})
}
this.$emit('selection', row)
},
原理:本质是对 JavaScript 执行原理EventLoop的一种应用。nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现,本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列。
六、watch(相关内容)
监听数据变化
watch: {
"$route.path"(path) {
this.active = path;
}
},
watch: {
'$store.state.tab.currentPath'(tab) {
this.tabName = tab.pathname;
this.$router.push(tab.pathname);
},
positionList: {
handler: function (val, oldVal) {
this.positionListInfo = val;
this.positionInfo = this.positionTitle;
},
deep: true,
},
activeIndex: function (val, oldVal) {
//监听vuex中activeIndex值
if (!this.isNavClick) {
this.topNavData();
}
},
},
watch: {
activeIndex: {
immediate: true,
handler(val) {
this.tabsActiveIndex = val;
},
},
},
七、computed(相关内容)
计算属性
computed: {
searchData () {
return this.showCollapse && this.collapse ? this.compactData : this.data
}
},
computed: {
isViewMode () {
return this.imgAttr.disabled
}
},
八、初始化字段
如果字段不存在,那么在获取数据时候初始化字段
data.forEach((item) => {
item.number = 0
})
九、参考连接
(13条消息) Vue中,$forceUpdate()的使用_y521123y的博客-CSDN博客_$forceupdate