欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue渲染失敗的幾種原因及解決方案

 更新時間:2022年06月05日 15:54:27   作者:莫青魚籽  
這篇文章主要介紹了Vue渲染失敗的幾種原因及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

Vue渲染失敗原因及解決

在進(jìn)行數(shù)據(jù)雙向綁定中,常遇到當(dāng)數(shù)據(jù)變了,頁面卻沒有同步渲染的情況。

首先Vue 的數(shù)據(jù)雙向綁定原理 是分為

  • 1.observe
  • 2.deps
  • 3.watcher

在observe中,會通過Object.keys()獲取所有的屬性push一個訂閱器 到 deps中,

一.假設(shè)template中

我在created的鉤子函數(shù)中定義了this.a = 1,在btn中添加了事件改變this.a,此時觀察到頁面未渲染。

<template>
? ? <div>{{a}}
? ? <button ?@click="fnbtn">點擊</button>
? ? </div>
</template>

原因:Vue 無法檢測 property 的添加或移除。由于 Vue 會在初始化實例時對 property 執(zhí)行 getter/setter 轉(zhuǎn)化,所以 property 必須在 data 對象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。

解決:

在data中定義屬性a,此時點擊按鈕頁面會進(jìn)行同步渲染。

data(){
? ? return{
? ? ? a:1
? ? }
},

二.因為Vue無法檢測到屬性的添加和移除

所以以下操作,頁面也沒辦法同步渲染

<template>
? ? <div>
? ? ? <p v-for="(value,key) in obj">
? ? ? ? {{value}}
? ? ? </p>
? ? <button ?@click="fnbtn">點擊</button>
? ? </div>
</template>
data(){
? ? return{
? ? ? obj:{
? ? ? ? a:1,
? ? ? ? b:2
? ? ? }
? ? }
},
fnbtn(){
? this.obj.c = 3
},

解決:

1.在data中obj默認(rèn)生成定義一個c, obj:{ a:1, b:2,c:' ' }直接渲染的話,會渲染出一個空的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提供了原生的方法處理 該方法可以向向嵌套對象添加響應(yīng)式 property。

this.$set(this.obj,'c',3)

3.若是要刪除屬性b,采用直接 this.obj.b = ' '的方式,但是最好能結(jié)合下計算屬性的方法避免生成無用的標(biāo)簽。除此之外,Vue采用了另一種方法也可以達(dá)到想要的效果

this.obj = Object.assign({}, { a: 1})

相當(dāng)于重新為obj指向了新的對象,此時查看控制臺也沒有空的標(biāo)簽產(chǎn)生。

三. 對于數(shù)組

當(dāng)你直接去改變arr[i]的某個值時,并不會觸發(fā)響應(yīng)渲染

<p v-for="i in arr">
? {{i}}
</p>
this.arr[0] = 8 //此時數(shù)組確實改變了,但是不會觸發(fā)響應(yīng)渲染。

原因:

Vue 不能檢測以下數(shù)組的變動:

  • 當(dāng)你利用索引直接設(shè)置一個數(shù)組項時,例如:vm.items[indexOfItem] = newValue
  • 當(dāng)你修改數(shù)組的長度時,例如:vm.items.length = newLength

解決:

1.采用上述this.$set方法

this.$set(this.arr, 0, 8) //因為數(shù)組也可以理解成key為索引的對象 {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)致渲染出錯的幾種情況和解決方法,當(dāng)數(shù)據(jù)發(fā)生改變而頁面沒有渲染的時候,要分析是數(shù)據(jù)響應(yīng)的哪一步出現(xiàn)了問題。

擴(kuò)展:異步更新(就是當(dāng)數(shù)據(jù)發(fā)生改變還沒有渲染到dom的時候,此時去獲取那個dom元素的值是舊的值)

可以用 this.$nextTick(fn(){})來獲取新的值

this.$nextTick(fn(){})返回一個Promise對象,所以可以結(jié)合async await結(jié)合使用

Vue渲染錯誤問題

Vue 報錯

[Vue warn]: Error in render: “TypeError: Cannot read property ‘1’ of undefined”

原因

組件中,使用異步加載數(shù)據(jù)渲染組件。在組件第一次渲染時,數(shù)據(jù)對象還沒有被賦值,此時組件渲染會因為缺少數(shù)據(jù)報錯。

解決

用v-if控制,在異步拿到數(shù)據(jù)之前,不渲染該組件。

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

相關(guān)文章

最新評論