Vue渲染失敗的幾種原因及解決方案
Vue渲染失敗原因及解決
在進(jìn)行數(shù)據(jù)雙向綁定中,常遇到當(dāng)數(shù)據(jù)變了,頁(yè)面卻沒有同步渲染的情況。
首先Vue 的數(shù)據(jù)雙向綁定原理 是分為
- 1.
observe
- 2.
deps
- 3.
watcher
在observe中,會(huì)通過(guò)Object.keys()獲取所有的屬性push一個(gè)訂閱器 到 deps中,
一.假設(shè)template中
我在created的鉤子函數(shù)中定義了this.a = 1,在btn中添加了事件改變this.a,此時(shí)觀察到頁(yè)面未渲染。
<template> ? ? <div>{{a}} ? ? <button ?@click="fnbtn">點(diǎn)擊</button> ? ? </div> </template>
原因:Vue 無(wú)法檢測(cè) property 的添加或移除。由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì) property 執(zhí)行 getter/setter 轉(zhuǎn)化,所以 property 必須在 data 對(duì)象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。
解決:
在data中定義屬性a,此時(shí)點(diǎn)擊按鈕頁(yè)面會(huì)進(jìn)行同步渲染。
data(){ ? ? return{ ? ? ? a:1 ? ? } },
二.因?yàn)閂ue無(wú)法檢測(cè)到屬性的添加和移除
所以以下操作,頁(yè)面也沒辦法同步渲染
<template> ? ? <div> ? ? ? <p v-for="(value,key) in obj"> ? ? ? ? {{value}} ? ? ? </p> ? ? <button ?@click="fnbtn">點(diǎn)擊</button> ? ? </div> </template>
data(){ ? ? return{ ? ? ? obj:{ ? ? ? ? a:1, ? ? ? ? b:2 ? ? ? } ? ? } }, fnbtn(){ ? this.obj.c = 3 },
解決:
1.在data中obj默認(rèn)生成定義一個(gè)c, obj:{ a:1, b:2,c:' ' }直接渲染的話,會(huì)渲染出一個(gè)空的dom元素,所以最好在computed中進(jìn)行下處理
computed:{ ? objFilter(){ ? ? let newObj = JSON.parse(JSON.stringify(this.obj)) ? ? for(let key in newObj){ ? ? ? if(!newObj[key]){ ? ? ? ? delete newObj[key] ? ? ? } ? ? } ? ? return newObj ? } },
2.上述方式比較麻煩,Vue提供了原生的方法處理 該方法可以向向嵌套對(duì)象添加響應(yīng)式 property。
this.$set(this.obj,'c',3)
3.若是要?jiǎng)h除屬性b,采用直接 this.obj.b = ' '的方式,但是最好能結(jié)合下計(jì)算屬性的方法避免生成無(wú)用的標(biāo)簽。除此之外,Vue采用了另一種方法也可以達(dá)到想要的效果
this.obj = Object.assign({}, { a: 1})
相當(dāng)于重新為obj指向了新的對(duì)象,此時(shí)查看控制臺(tái)也沒有空的標(biāo)簽產(chǎn)生。
三. 對(duì)于數(shù)組
當(dāng)你直接去改變arr[i]的某個(gè)值時(shí),并不會(huì)觸發(fā)響應(yīng)渲染
<p v-for="i in arr"> ? {{i}} </p> this.arr[0] = 8 //此時(shí)數(shù)組確實(shí)改變了,但是不會(huì)觸發(fā)響應(yīng)渲染。
原因:
Vue 不能檢測(cè)以下數(shù)組的變動(dòng):
- 當(dāng)你利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí),例如:vm.items[indexOfItem] = newValue
- 當(dāng)你修改數(shù)組的長(zhǎng)度時(shí),例如:vm.items.length = newLength
解決:
1.采用上述this.$set方法
this.$set(this.arr, 0, 8) //因?yàn)閿?shù)組也可以理解成key為索引的對(duì)象 {0:1,1:2,2:3,3:4}
2.采用splice
splice(indexOfItem, 1, newValue)
以下方法操作數(shù)組都可觸發(fā)響應(yīng),直接給數(shù)組重新賦值也可以觸發(fā)響應(yīng) (this.arr = newArr)
- 1.
push()
- 2.
pop()
- 3.
shift()
- 4.
unshift()
- 5.
splice()
拼接 - 6.
sort()
將…分類 - 7.
reverse()
顛倒 反轉(zhuǎn)
以上就是容易導(dǎo)致渲染出錯(cuò)的幾種情況和解決方法,當(dāng)數(shù)據(jù)發(fā)生改變而頁(yè)面沒有渲染的時(shí)候,要分析是數(shù)據(jù)響應(yīng)的哪一步出現(xiàn)了問(wèn)題。
擴(kuò)展:異步更新(就是當(dāng)數(shù)據(jù)發(fā)生改變還沒有渲染到dom的時(shí)候,此時(shí)去獲取那個(gè)dom元素的值是舊的值)
可以用 this.$nextTick(fn(){})來(lái)獲取新的值
this.$nextTick(fn(){})返回一個(gè)Promise對(duì)象,所以可以結(jié)合async await結(jié)合使用
Vue渲染錯(cuò)誤問(wèn)題
Vue 報(bào)錯(cuò)
[Vue warn]: Error in render: “TypeError: Cannot read property ‘1’ of undefined”
原因
組件中,使用異步加載數(shù)據(jù)渲染組件。在組件第一次渲染時(shí),數(shù)據(jù)對(duì)象還沒有被賦值,此時(shí)組件渲染會(huì)因?yàn)槿鄙贁?shù)據(jù)報(bào)錯(cuò)。
解決
用v-if控制,在異步拿到數(shù)據(jù)之前,不渲染該組件。
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue中使用unity3D如何實(shí)現(xiàn)webGL將要呈現(xiàn)的效果
這篇文章主要介紹了vue中使用unity3D如何實(shí)現(xiàn)webGL將要呈現(xiàn)的效果,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07Vue.js中使用${}實(shí)現(xiàn)變量和字符串的拼接方式
這篇文章主要介紹了Vue.js中使用${}實(shí)現(xiàn)變量和字符串的拼接方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-07-07vue3中實(shí)現(xiàn)使用element-plus調(diào)用message
這篇文章主要介紹了vue3中實(shí)現(xiàn)使用element-plus調(diào)用message,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09Vue執(zhí)行方法,方法獲取data值,設(shè)置data值,方法傳值操作
這篇文章主要介紹了Vue執(zhí)行方法,方法獲取data值,設(shè)置data值,方法傳值操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08vue2 d3實(shí)現(xiàn)企查查股權(quán)穿透圖股權(quán)結(jié)構(gòu)圖效果詳解
這篇文章主要為大家介紹了vue2 d3實(shí)現(xiàn)企查查股權(quán)穿透圖股權(quán)結(jié)構(gòu)圖效果詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01vant中的picker選擇器自定義選項(xiàng)內(nèi)容
這篇文章主要介紹了vant中的picker選擇器自定義選項(xiàng)內(nèi)容,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12Vue使用富文本編輯器Vue-Quill-Editor(含圖片自定義上傳服務(wù)、清除復(fù)制粘貼樣式等)
這篇文章主要介紹了Vue項(xiàng)目中使用富文本編輯器Vue-Quill-Editor(含圖片自定義上傳服務(wù)、清除復(fù)制粘貼樣式等)的相關(guān)知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05