Vue踩坑筆記（更新ing）

1、Vue中修改引用數據類型不觸發頁面更新的解決方式

咱們知道，Vue組件中，有時直接操做引用數據類型，視圖有時並不會更新。

1.一個方法是使用$set

例如

this.$set(this.obj,"key","value")
this.$set(this.arr,index,"value")
複製代碼

2.可使用數組的部分方法可使視圖自動進行更新，就不須要使用$set了。

Vue 包含一組觀察數組的變異方法，因此它們也將會觸發視圖更新。這些方法以下：

splice()、 push()、pop()、shift()、unshift()、sort()、reverse()
複製代碼

3.能夠把須要改變的引用數據類型保存在另一個變量中，對這個變量進行操做以後再用這個這個變量替換原有的引用數據類型

不會大規模渲染整個列表

你可能認爲這將致使 Vue 丟棄現有 DOM 並從新渲染整個列表。幸運的是，事實並不是如此。Vue 爲了使得 DOM 元素獲得最大範圍的重用而實現了一些智能的、啓發式的方法，因此用一個含有相同元素的數組去替換原來的數組是很是高效的操做。

Vue數組更新檢測

2、v-for和v-if

<div v-for="item in items" :key="item.id" v-if="item.id==009"></div>
複製代碼

在Vue中v-for的優先級高於v-if，每一次的v-if判斷以前都會先v-for循環。

因此若是若是v-if的判斷條件和item無關的話，這樣寫：

<div v-for="item in items" :key="item.id" v-if="status==true"></div>
複製代碼

並很差。 咱們應當將v-if放到節點的父級來進行判斷處理。

<div v-if="status==true">
    <div v-for="item in items" :key="item.id"></div>
</div>
複製代碼

這樣處理能夠節約性能。

3、v-for的幾種不常見的用法

// 數據    
      data() {
          return{
           obj: {
              ob: "OB",
              koro1: "Koro1"
            },
            model: {
              ob: "默認ob",
              koro1: "默認koro1"
            }   
          }
      },
    // html模板
    // 1、input就跟數據綁定在一塊兒了，那兩個默認數據也會在input中顯示
    <div v-for="(value,key) in obj">
       <input type="text" v-model="model[key]">
    </div>
    //2、沒有數據的狀況下渲染多個相似節點
    <div v-for="n in 5">
        <span>這裏會被渲染5次，渲染模板{{n}}</span>
     </div>
複製代碼

一段取值範圍的v-for