$nextTick()

this.$nextTick()將回調延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它，然后等待 DOM 更新。

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

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

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

$forceUpdate()

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

使用場景

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

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

用法

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

$set()

使用場景

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

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

注意對象不能是 Vue 實例，或者 Vue 實例的根數(shù)據(jù)對象。

用法

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

• target：要更改的數(shù)據(jù)源(可以是對象或者數(shù)組)
• propertyName/index：對象新添加的屬性名或者數(shù)組新添加元素的下標位置
• value：新添加屬性的值

// 對象
this.$set(this.student,"age", 24)
// 數(shù)組
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)

總結

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!

最新評論