Vue改變數組值，頁面視圖爲什麼不刷新？

一、iview table 自定義序號

將其對應的type設爲 index 便可

{
    title: "序號",
    width: 70,
    align: "left",
    type: "index"
}
複製代碼

二、父子組件傳值，父組件調用子組件方法

場景：iview 中 封裝一個modal 組件公共引用

父組件：

// 引入組件
import orderModal from './orderModal.vue'
// 使用
<order-modal 
  :showPop="showPop"    // 控制組件的顯示關閉
  :orderData="orderData"      // 數據
  :orderH1="orderH1"
  :btnText="btnText"
  @on-close="hidePop">    // 將子組件的方法傳遞給父組件使用
</order-modal>

// 父組件方法
hidePop(e,type){
    if(type !== undefined){
      // 方法
    }
    this.showPop = e  // 關閉彈窗 e 爲子組件傳遞過來的值
},
複製代碼

子組件

<Modal 
    v-model="currentValue"  // 子組件中接受父組件的 isShowAdd
    @on-cancel="cancel">    // Modal 的關閉事件
    <Form   
        ref="orderData" 
        :model="orderData">  // 接受傳遞的數據
    </Form>
</Modal>

// 子組件 props接受傳遞參數
props: ['showPop','orderData','orderH1','btnText'],
複製代碼

這裏本來 ==v-model== 使用的使傳遞過來的 ==showPop== 做爲參數，一開始沒有問題，可是若是我想將子組件的關閉方法提到父組件去觸發 那麼 直接在 父組件 ==this.showPop = false==。那麼就會提示報錯，由於 Vue使單向數據流不能直接改版傳遞子組件的值。改爲以下：

// 在子組件中用watch來監聽 isShowAdd 是否變化，
而後賦值給 currentValue
watch: {
  isShowAdd(value,val) {
    this.currentValue = value
  }
}
// 子組件的關閉操做提高到父組件 $emit
cancel(type){
    this.$emit('on-close', false, type)
}

複製代碼

三、網上的資料以下圖：

總結：

這個問題還折騰了快半個小時，歸根到底仍是不常常使用的後果，好多代碼以前都用過，像封裝組件這種還要折騰，簡直是不知道說什麼好呀，只能之後多使用了。

四、Vue改變數據視圖不更新

4.1 異步更新隊列

Vue 異步執行 DOM 更新。只要觀察到數據變化，Vue 將開啓一個隊列，並緩衝在同一事件循環中發生的全部數據改變。

若是同一個 watcher 被屢次觸發，只會被推入到隊列中一次。

這種在緩衝時去除重複數據對於避免沒必要要的計算和 DOM 操做上很是重要。

而後，在下一個的事件循環「tick」中，

Vue 刷新隊列並執行實際 (已去重的) 工做。

Vue 在內部嘗試對異步隊列使用原生的 Promise.then 和 MessageChannel，若是執行環境不支持，會採用 setTimeout(fn, 0) 代替。
複製代碼

解決方法

this.$nextTick()
複製代碼

4.2 數組改變視圖不更新

經過如下數組方法可讓vue監測數組改動

push()

pop()

shift()

unshift()

splice()

sort()

reverse()
複製代碼

4.3 vue不能檢測到對象屬性的添加或刪除

因爲 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，因此屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的

解決方法

一、Vue.set(object, key, value)

二、Object.assign() 或 _.extend() 方法來添加屬性。
複製代碼

可是第二種方法，添加到對象上的新屬性不會觸發更新。在這種狀況下能夠建立一個新的對象，讓它包含原對象的屬性和新的屬性：

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })  // 深拷貝

複製代碼