前端 v-if的渲染和语句执行问题
这里的input标签的父级DOM使用v-if控制,
<input
type="text"
ref="test"
class="cfsUpdateWindowInput"
:value="stationId"
readonly="true"
/>
当updateWindows的值改为true时,元素并未立刻渲染,this.$refs.test也获取不到元素,
acquireProperties(updateWindows, index, row) {
this.updateWindows = updateWindows;
console.log("1",this.$refs.test);
};
当进行异步加载,这时可以获取DOM
acquireProperties(updateWindows, index, row) {
this.updateWindows = updateWindows;
this.$nextTick(() => {
console.log("1", this.$refs.test);
});
经过一番查阅相关资料,一点浅薄之见就是:
js为单线程语言,
this.updateWindows = updateWindows;
console.log("1",this.$refs.test);
这两个命令进入主线程,当执行了第一条语句时,将渲染DOM这个任务加入到Event Table里,也就是任务队列里,执行第二局之后才会执行任务队列里的渲染任务,这时肯定是获取不到DOM的,当加了 n e x t T i c k 之 后 , 将 第 二 条 语 句 的 任 务 也 加 入 到 任 务 队 列 里 , 执 行 完 了 渲 染 任 务 之 后 才 执 行 获 取 D O M 元 素 的 任 务 , 当 然 使 用 v − s h o w 可 以 不 添 加 nextTick之后,将第二条语句的任务也加入到任务队列里,执行完了渲染任务之后才执行获取DOM元素的任务,当然使用v-show可以不添加 nextTick之后,将第二条语句的任务也加入到任务队列里,执行完了渲染任务之后才执行获取DOM元素的任务,当然使用v−show可以不添加nextTick就能使用。一点浅薄之见,有错误的地方请大佬指正。