vue更新數(shù)據(jù)卻不渲染頁面的解決

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

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

vue更新數(shù)據(jù)卻不渲染頁面

原因：由于JavaScript的限制，Vue不能檢測(cè)數(shù)組和對(duì)象的變化

解決辦法：

this.$set(arr,index,newVal)

場(chǎng)景：

點(diǎn)擊這個(gè)沒有顯示“√”

解決辦法：

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

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

頁面不更新，本質(zhì)上就是數(shù)據(jù)沒有更新

原因：路由視圖組件引用了相同組件時(shí)，當(dāng)路由參數(shù)變化時(shí)，會(huì)導(dǎo)致該組件無法更新。

解決辦法：

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

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

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

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

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

這種在緩沖時(shí)去除重復(fù)數(shù)據(jù)對(duì)于避免不必要的計(jì)算和 DOM 操作是非常重要的。

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

解決辦法：

this.$nextTick(function(){ })

原因：顯示的元素不會(huì)動(dòng)

解決辦法：

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

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

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

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

一. 模板到render

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

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

修改頁面input時(shí)，被自動(dòng)調(diào)用的選項(xiàng)順序如下：

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

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