91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2022-06-06 09:14:06 來源:億速云 閱讀:915 作者:iii 欄目:開發技術

本篇內容介紹了“Vue渲染失敗的原因是什么及如何解決”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!

Vue渲染失敗原因及解決

在進行數據雙向綁定中,常遇到當數據變了,頁面卻沒有同步渲染的情況。

首先Vue 的數據雙向綁定原理 是分為

  • 1.observe

  • 2.deps

  • 3.watcher

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

一.假設template中

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

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

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

解決:

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

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默認生成定義一個c, obj:{ a:1, b:2,c:' ' }直接渲染的話,會渲染出一個空的dom元素,所以最好在computed中進行下處理

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提供了原生的方法處理 該方法可以向向嵌套對象添加響應式 property。

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

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

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

相當于重新為obj指向了新的對象,此時查看控制臺也沒有空的標簽產生。

三. 對于數組

當你直接去改變arr[i]的某個值時,并不會觸發響應渲染

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

原因:

Vue 不能檢測以下數組的變動:

  • 當你利用索引直接設置一個數組項時,例如:vm.items[indexOfItem] = newValue

  • 當你修改數組的長度時,例如:vm.items.length = newLength

解決:

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

this.$set(this.arr, 0, 8) //因為數組也可以理解成key為索引的對象 {0:1,1:2,2:3,3:4}

2.采用splice

splice(indexOfItem, 1, newValue)

以下方法操作數組都可觸發響應,直接給數組重新賦值也可以觸發響應 (this.arr = newArr)

  • 1.push()

  • 2.pop()

  • 3.shift()

  • 4.unshift()

  • 5.splice() 拼接

  • 6.sort() 將&hellip;分類

  • 7.reverse() 顛倒 反轉

以上就是容易導致渲染出錯的幾種情況和解決方法,當數據發生改變而頁面沒有渲染的時候,要分析是數據響應的哪一步出現了問題。

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

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

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

Vue渲染錯誤問題

Vue 報錯

[Vue warn]: Error in render: “TypeError: Cannot read property &lsquo;1&rsquo; of undefined”

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

原因

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

解決

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

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

“Vue渲染失敗的原因是什么及如何解決”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站,小編將為大家輸出更多高質量的實用文章!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

vue
AI

财经| 东乌| 洱源县| 遵化市| 尼勒克县| 宜君县| 龙陵县| 黎城县| 天全县| 阿拉善右旗| 宁强县| 涟源市| 宝清县| 徐水县| 长顺县| 钟祥市| 玉环县| 科技| 甘孜县| 鹤山市| 盘锦市| 新竹县| 星子县| 嘉峪关市| 龙口市| 青铜峡市| 洞头县| 普安县| 比如县| 年辖:市辖区| 遂昌县| 亳州市| 沙田区| 铜川市| 长兴县| 太谷县| 平塘县| 桃园县| 蚌埠市| 淳化县| 驻马店市|