腳本之家服務器常用軟件

快捷導航

vue更新數據卻不渲染頁面的解決

更新時間：2022年08月12日 10:07:30 作者：自信酷

這篇文章主要介紹了vue更新數據卻不渲染頁面的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue更新數據卻不渲染頁面

原因：由于JavaScript的限制，Vue不能檢測數組和對象的變化

解決辦法：

this.$set(arr,index,newVal)

場景：

點擊這個沒有顯示“√”

解決辦法：

checkClick (item) {
    item.check =! item.check;
    this.$forceUpdate() 
},

聽說循環(huán)數據更新的層級太深，導致數據不更新，從而導致視圖不更新，用上面可以解決，但我沒遇到過這種情況，請查看Vue.js官方

頁面不更新，本質上就是數據沒有更新

原因：路由視圖組件引用了相同組件時，當路由參數變化時，會導致該組件無法更新。

解決辦法：

通過watch監(jiān)聽$route的變化

watch: {
    '$route': function() {
 
     }
}

原因：Vue在更新DOM時是異步執(zhí)行。

只要偵聽到數據變化，Vue將開啟一個隊列，并緩沖在同一個事件循環(huán)中發(fā)生的所有數據變更。

如果同一個 watcher 被多次觸發(fā)，只會被推入到隊列中一次。

這種在緩沖時去除重復數據對于避免不必要的計算和 DOM 操作是非常重要的。

然后，在下一個的事件循環(huán)“nextTick”中，Vue 刷新隊列并執(zhí)行實際 (已去重的) 工作。

解決辦法：

this.$nextTick(function(){ })

原因：顯示的元素不會動

解決辦法：

使用v-if先隱藏元素，更新的數組排序處理好了，才顯示元素

首先vue會找到webpack的打包配置文件。在build/webpack.base.conf.js下：在這里，定義了vue的程序入口文件

Vue 推薦在絕大多數情況下使用 template 來創(chuàng)建你的 HTML。但是模板畢竟是模板，不是真實的dom節(jié)點。從模板到真實dom節(jié)點還需要經過一些步驟

組件內部data發(fā)生變化，組件和子組件引用data作為props重新調用render函數，生成虛擬dom, 返回到步驟3

一. 模板到render

// App.vue 
<template>
    <div>
        hello word
    </div>
</template>
<script>
export default {
}
</script>
<style>
</style>

在頁面首次加載執(zhí)行順序有如下：

修改頁面input時，被自動調用的選項順序如下：

watch //首先先監(jiān)聽到了改變事件
filters //過濾器沒有添加在該input元素上，但是也被調用了
beforeUpdate //數據更新時調用，發(fā)生在虛擬dom打補丁前
directived-update //指令所在的組件的vNode更新時調用，但可能發(fā)生在其子vNode更新前
directives-componentUpdated //指令所在的組件的vNode及其子組件的vNode全部更新后調用updated //組件dom已經更新

組件銷毀時，執(zhí)行順序如下：