Spring Boot2.x 攔截器Interceptor對靜態資源的處理
阿新 • • 發佈:2020-12-26
背景
vue是非同步渲染的,當data改變之後,DOM不會立刻被渲染,頁面渲染時會將data的修改做整合,多次data修改只會做整合最後一次性渲染出來,這也是非同步渲染的原因。只有非同步渲染才可以實現整合操作。
例子
methods: {
update() {
for (let i = 0; i < 10; i++) {
this.testNum = this.testNum + i;
}
},
},
在你的 Vue 檢視中, testNum 會發生變化。不過需要注意的是這個變化的過程,雖然我們把 firstNum 迴圈修改了 10 次,但是實際上它只會把最後一次的值更新到檢視上——這也是非常合理的,比如說我們這個 demo 裡,每一次迴圈給 testNum 的賦值只不過是一個過程,最終的目的是拿到 10 次迴圈的計算結果而已。如果我們硬去算 10 次,那麼不必要的效能開銷必然是令人肉疼的。
需求
我們需要對data修改後並拿到DOM,對DOM進行操作解決,
例子
<template> <div id="app"> <ul ref="ul1"> <li v-for="(v, i) in list" :key="i">{{ v }}</li> </ul> <button @click="add">add DOM</button> </div> </template> <script> export default { name: "app", data() { return { list: ["a", "b", "c"], }; }, methods: { add() { this.list.push(`${Date.now()}`); this.list.push(`${Date.now()}`); this.list.push(`${Date.now()}`); const ulElem = this.$refs.ul1; console.log(ulElem.childNodes.length); }, }, }; </script>
本來點選完之後陣列長度應該輸出6個,但是實際上陣列長度只有3個,因為data改變後,DOM並不會立刻改變,此時我們是拿不到新增的節點的,這時候的DOM節點還是一開始的a,b,c 。DOM操作執行完之後,它再非同步渲染。
不過我們的期望是點選完之後立刻拿到後面的三個,這時候就需要請出我們的主角nextTick。
add() { this.list.push(`${Date.now()}`); this.list.push(`${Date.now()}`); this.list.push(`${Date.now()}`); const ulElem = this.$refs.ul1; this.$nextTick(() => { console.log(ulElem.childNodes.length); }); },
這個例子也可以看出,$nextTick會待DOM渲染完成再回調,同時也可以看出,我們雖然一次點選有三次修改data,但是多次修改會進行整合,最後渲染一次,這也說明渲染也是非同步的,如果是同步,就沒辦法整合。