$nextTick()

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

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

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

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

$forceUpdate()

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

使用場(chǎng)景

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

另一方面，表單渲染時(shí)，有時(shí)進(jìn)行了選擇操作，但是表單內(nèi)容未更新，可使用強(qiáng)制更新

用法

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

$set()

使用場(chǎng)景

受 ES5 的限制，Vue.js 不能檢測(cè)到對(duì)象屬性的添加或刪除

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

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

用法

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

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

// 對(duì)象
this.$set(this.student,"age", 24)
// 數(shù)組
this.$set(this.arrayList, 2, { name: "張三" })

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

使用場(chǎng)景

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

用法

父組件

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

實(shí)際會(huì)被等價(jià)擴(kuò)展為

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

子組件

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

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

最新評(píng)論