Vue渲染失敗的原因是什么及如何解決

本篇內(nèi)容介紹了“Vue渲染失敗的原因是什么及如何解決”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

Vue渲染失敗原因及解決

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

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

• 1.observe

• 2.deps

• 3.watcher

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

一.假設(shè)template中

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

<template>
    <div>{{a}}
    <button  @click="fnbtn">點(diǎn)擊</button>
    </div>
</template>

原因：Vue 無法檢測(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)擊按鈕頁面會(huì)進(jìn)行同步渲染。

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

二.因?yàn)閂ue無法檢測(cè)到屬性的添加和移除

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

<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ì)算屬性的方法避免生成無用的標(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ā)生改變而頁面沒有渲染的時(shí)候，要分析是數(shù)據(jù)響應(yīng)的哪一步出現(xiàn)了問題。

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

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

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

Vue渲染錯(cuò)誤問題

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ù)之前，不渲染該組件。

“Vue渲染失敗的原因是什么及如何解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！