Vue開發常用方法詳解

Posted on by

$nextTick()

this.$nextTick()將回調延遲到下次 DOM 更新循環之後執行。在修改數據之後立即使用它，然後等待 DOM 更新。

使用場景
在一些情況下，變量進行瞭初始賦值或更新，但是DOM還未更新完成時，使用變量的值是不起作用的。此時就需要通過this.$nextTick()等待DOM更新加載完成後立即進行使用。常用於created鉤子函數中以及涉及到DOM更新的情況。
用法

this.$nextTick(() => {  this.$refs.table.refresh(true)})

this.$nextTick()在頁面交互，尤其是從後臺獲取數據後重新生成dom對象之後的操作有很大的優勢

$forceUpdate()

迫使 Vue 實例重新渲染。註意它僅僅影響實例本身和插入插槽內容的子組件，而不是所有子組件。

使用場景

對於一個復雜的對象，例如一個對象數組，直接去給數組上某一個元素增加屬性，或者直接把數組的length變成0，vue無法知道發生瞭改變時可以使用強制更新

另一方面，表單渲染時，有時進行瞭選擇操作，但是表單內容未更新，可使用強制更新

在這裡插入圖片描述

用法

this.$nextTick(() => {
  this.$refs.table.refresh(true)
})

$set()

使用場景

受 ES5 的限制，Vue.js 不能檢測到對象屬性的添加或刪除

向響應式對象中添加一個 property，並確保這個新 property 同樣是響應式的，且觸發視圖更新。它必須用於向響應式對象上添加新 property，因為 Vue 無法探測普通的新增 property (比如 this.myObject.newProperty = ‘hi’)

註意對象不能是 Vue 實例，或者 Vue 實例的根數據對象。

用法

this.$set( target, propertyName/index, value )

  • target：要更改的數據源(可以是對象或者數組)
  • propertyName/index：對象新添加的屬性名或者數組新添加元素的下標位置
  • value：新添加屬性的值
// 對象
this.$set(this.student,"age", 24)
// 數組
this.$set(this.arrayList, 2, { name: "張三" })

.sync——2.3.0+ 新增（Vue 3.x中已被v-model替換，不再支持）

使用場景

在有些情況下，我們可能需要對一個 prop 進行“雙向綁定”，在vue 2.3.0之後便可以使用.sync修飾符進行操作。Vue 3.0之後不再支持

用法

父組件

<comp :foo.sync="bar"></comp>

實際會被等價擴展為

<comp :foo="bar" @update:foo="val => bar = val"></comp>

子組件

this.$emit('update:foo', newValue)

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：