$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無法知道發生了改變時可以使用強制更新

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

在這里插入圖片描述
用法

// 用法一
<a-select
   placeholder="請選擇"
   v-model="infoData.approveBy"
   :options="roleList"
   :disabled="!isEdit"
   @change="$forceUpdate()"
 />
 
//用法二
switchChange (checked) {
   this.isEdit = checked
   this.$forceUpdate()
 },

$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)

持續更新…

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/384291.html

標籤：其他

上一篇：vue移動端實作拖拽排序

下一篇：純HTML+CSS網頁設計期末作業（個人網站）

Vue開發 常用方法總結

$nextTick()

$forceUpdate()

$set()

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

Vue開發常用方法總結