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

1.Vue不能檢測通過數(shù)組索引直接修改一個數(shù)組項

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

解決辦法：

this.$set(arr,index,newVal)

2.選擇功能選中時賦值了,但沒渲染頁面

場景：

點擊這個沒有顯示“√”

解決辦法：

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

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

3.路由參數(shù)變化時

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

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

解決辦法：

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

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

4.在異步更新執(zhí)行之前操作DOM數(shù)據(jù)不會變化

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

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

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

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

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

解決辦法：

this.$nextTick(function(){ })

5.獲取后臺返回的數(shù)組進(jìn)行排序處理了,頁面內(nèi)容卻不排序

 原因：顯示的元素不會動

解決辦法：

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

vue頁面的渲染過程

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

vue加載時文件的執(zhí)行順序

• 執(zhí)行index.html文件
• 執(zhí)行main.js文件
• main.js掛載了app.vue文件，用app.vue的templete替換index.html中的
• main.js中注入了路由文件，將對應(yīng)的組件渲染到router-view中
• router-view中加載Layout文件
• Layout 加載Navbar, Sidebar, AppMain

vue內(nèi)部頁面的執(zhí)行順序

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

• 把模板編譯為render函數(shù)
• 實例進(jìn)行掛載, 根據(jù)根節(jié)點render函數(shù)的調(diào)用，遞歸的生成虛擬dom
• 對比虛擬dom，渲染到真實dom

組件內(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>

vue中各選項及鉤子函數(shù)執(zhí)行順序

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

• beforeCreate //在實例初始化之后、創(chuàng)建之前執(zhí)行
• created //實例創(chuàng)建后執(zhí)行
• beforeMounted //在掛載開始之前調(diào)用
• filters //掛載前加載過濾器
• computed //計算屬性
• directives-bind //只調(diào)用一次，在指令第一次綁定到元素時調(diào)用
• directives-inserted //被綁定元素插入父節(jié)點時調(diào)用
• activated //keek-alive組件被激活時調(diào)用，則在keep-alive包裹的嵌套的子組件中觸發(fā)
• mounted //掛載完成后調(diào)用
• {{}} //mustache表達(dá)式渲染頁面

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

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

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

• beforeDestroy //實例銷毀之前調(diào)用
• directives-unbind //指令與元素解綁時調(diào)用，只調(diào)用一次
• deactivated //keep-alive組件停用時調(diào)用
• destroyed //實例銷毀之后調(diào)用

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論