Vue踩坑筆記（更新ing）

Z_P發表於2019-04-19
Vue筆記

一、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陣列更新檢測

二、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>
複製程式碼

這樣處理可以節約效能。

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

    // 資料    
      data() {
          return{
           obj: {
              ob: "OB",
              koro1: "Koro1"
            },
            model: {
              ob: "預設ob",
              koro1: "預設koro1"
            }   
          }
      },
    // html模板
    // 一、input就跟資料繫結在一起了，那兩個預設資料也會在input中顯示
    <div v-for="(value,key) in obj">
       <input type="text" v-model="model[key]">
    </div>
    //二、沒有資料的情況下渲染多個類似節點
    <div v-for="n in 5">
        <span>這裡會被渲染5次，渲染模板{{n}}</span>
     </div>
複製程式碼

一段取值範圍的v-for

相關文章