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

1.Vue不能檢測(cè)通過(guò)數(shù)組索引直接修改一個(gè)數(shù)組項(xiàng)

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

解決辦法：

this.$set(arr,index,newVal)

2.選擇功能選中時(shí)賦值了,但沒(méi)渲染頁(yè)面

場(chǎng)景：

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

解決辦法：

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

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

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

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

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

解決辦法：

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

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

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

原因：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(){ })

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

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

解決辦法：

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

vue頁(yè)面的渲染過(guò)程

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

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

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

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

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

• 把模板編譯為render函數(shù)
• 實(shí)例進(jìn)行掛載, 根據(jù)根節(jié)點(diǎn)render函數(shù)的調(diào)用，遞歸的生成虛擬dom
• 對(duì)比虛擬dom，渲染到真實(shí)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中各選項(xiàng)及鉤子函數(shù)執(zhí)行順序

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

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

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

• watch //首先先監(jiān)聽到了改變事件
• filters //過(guò)濾器沒(méi)有添加在該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í)行順序如下：

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

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

最新評(píng)論