欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue中?$forceUpdate的使用解析

 更新時間:2022年04月06日 14:48:02   作者:yerikyu  
這篇文章主要介紹了vue中?$forceUpdate的使用解析,該方案是比較好的一種方式,比如說我們嘗試直接給某個??object??增加一個屬性,發(fā)現(xiàn)頁面上沒有效果;直接將length變成0來清空數(shù)組,下文詳細資料需要的小伙伴可以參考一下

在vue的開發(fā)過程中,數(shù)據(jù)的綁定通常來說都不用我們操心,例如在??data??中有一個??msg??的變量,只要修改它,那么在頁面上,??msg??的內(nèi)容就會自動發(fā)生變化。但是如果對于一個復雜的對象,例如一個對象數(shù)組,直接去給數(shù)組上某一個元素增加屬性,或者直接把數(shù)組的??length??變成0,vue可能就無法知道發(fā)生了改變。這個其實就是考驗對于雙向綁定的更進一步的理解應用了。
在Vue中,雙向綁定屬于自動檔,然而在特定的情況下,需要手動觸發(fā)“刷新”操作,目前有四種方案可以選擇:

  • 刷新整個頁面
  • 使用v-if標記
  • 使用內(nèi)置的forceUpdate方法
  • 使用key-changing優(yōu)化組件

方案分析

本次文章主要重點在于分析??forceUpdate??這個方法,后續(xù)有機會再來分析??key-changing??。

forceUpdate

該方案是比較好的一種方式,比如說我們嘗試直接給某個??object??增加一個屬性,發(fā)現(xiàn)頁面上沒有效果;直接將length變成0來清空數(shù)組,也沒有效果,

關(guān)鍵代碼如下:

change: function(index) {
// 增加性格屬性
this.girls[idx].character = 'lovely';
},
clear: function() {
// 清空數(shù)組
this.girls.length = 0;
}

按照上面的寫法沒有產(chǎn)生想要的效果,是因為沒有按照vue的規(guī)范去寫,因為文檔里面寫了,對于深層的,最好用$set方法,這樣vue就可以知道發(fā)生了變化,同時vue也不建議直接修改length,而是給一個空數(shù)組來置空。
如果我們按照vue的規(guī)范去寫的,是可以實現(xiàn)變化的,

關(guān)鍵代碼如下:

change: function(index) {
// 增加性格屬性
this.$set(this.girls[idx],'character','lovely')
},
clear: function() {
// 清空數(shù)組
this.girls = [];
}

如果我們不想利用??$set??去設(shè)置,非要按照我們第一種方式去寫,可以實現(xiàn)么?可以的,就是利用??$forceUpdate??,此時修改了數(shù)據(jù),然而頁面層沒有變動,之后通過日志打印的方式確認數(shù)據(jù)是否有修改過,之后再確認有沒有監(jiān)聽到,用??$forceUpdate??就相當于按照最新數(shù)據(jù)給渲染一下。

關(guān)鍵代碼如下:

change: function(index) {
this.girls[idx].character = '男';
this.$forceUpdate();
},
clear: function() {
this.girls.length = 0;
this.$forceUpdate();
}

這種做法實際上并不推薦,官方說如果你現(xiàn)在的場景需要用??forceUpdate??方法 ,那么99%是你的操作有問題,如上data里不顯示聲明對象的屬性,之后添加屬性時正確的做法時用 ??$set()??方法,所以??forceUpdate??請慎用。
該同等效果的:window.location.reload()

本質(zhì)

在vue的官方文檔中有說明到這個是一個強制刷新的api,但很少用到,除非是遇到了需要實時響應組件狀態(tài)的時候

Force the component instance to re-render.

This should be rarely needed given Vue's fully automatic reactivity system. The only cases where you may need it is when you have explicitly created non-reactive component state using advanced reactivity APIs.

實現(xiàn)原理

Vue.prototype.$forceUpdate = function () {
const vm: Component = this
if (vm._watcher) {
vm._watcher.update()
}
}

實例需要重新渲染是在依賴發(fā)生變化的時候會通知??watcher??,然后通知??watcher??來調(diào)用??update??方法,就是這么簡單。

分析

forceUpdate就是重新render

  • 有些變量不在?? state??上,但是你又想達到這個變量更新的時候,重新(render),從而渲染虛擬DOM。
  • 注意到這個時候并不是重新加載組件。
  • 結(jié)合vue的生命周期,調(diào)用??$forceUpdate??后只會觸發(fā)??beforeUpdate??和??updated??這兩個鉤子函數(shù),不會觸發(fā)其他的鉤子函數(shù)。它僅僅影響實例本身和插入插槽內(nèi)容的子組件,而不是所有子組件,即強制更新因某些原因并未渲染到頁面的,已經(jīng)改變的,應該被渲染到頁面的數(shù)據(jù)
  • ??state??里的某個變量層次太深,更新的時候沒有自動觸發(fā)?? render??。

這些時候都可以手動調(diào)用 forceUpdate 自動觸發(fā) render 。所以建議使用?? immutable??來操作?? state?? ,??redux?? 等?? flux?? 架構(gòu)來管理?? state??。

刷新頁面

這個方案是挺low的,本質(zhì)上是刷新頁面

this.$router.go(0)

使用v-if標記

如果是刷新某個子組件,則可以通過??v-if??指令實現(xiàn)。我們知道,當??v-if??的值發(fā)生變化時,組件都會被重新渲染一遍。因此,利用??v-if??指令的特性,可以達到強制刷新組件的目的。

<template>
<compare v-if="refresh"></compare>
<el-button @click="refreshComp()">刷新comp組件</el-button>
</template>
<script>
import compare from '@/views/compare.vue'
export default {
name: 'parentComp',
data() {
return {
refresh: true
}
},
methods: {
refreshComp() {
// 移除組件
this.refresh = false
// 在組件移除后,重新渲染組件
// this.$nextTick可實現(xiàn)在DOM 狀態(tài)更新后,執(zhí)行傳入的方法。
this.$nextTick(() => {
this.refresh = true
})
}
}
}
</script>

key-changing

原理很簡單,vue使用key標記組件身份,當key改變時就是釋放原始組件,重新加載新的組件。

<template>
<div>
<span :key="key"></span>
</div>
</template>
<script>
export default {
data() {
return {
key: 0
}
},
methods: {
handleUpdateClick() {
this.key += 1 // 或者 this.key = new Date();
}
}
}
</script>

到此這篇關(guān)于vue中 $forceUpdate的使用解析的文章就介紹到這了,更多相關(guān)$forceUpdate解析內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • element-plus結(jié)合sortablejs實現(xiàn)table行拖拽效果

    element-plus結(jié)合sortablejs實現(xiàn)table行拖拽效果

    使用element-plus的el-table組件創(chuàng)建出來的table,結(jié)合sortable.js實現(xiàn)table行拖動排序,文中有詳細的代碼示例供大家參考,具有一定的參考價值,感興趣的同學可以自己動手試一試
    2023-10-10
  • VUE UPLOAD 通過ACTION返回上傳結(jié)果操作

    VUE UPLOAD 通過ACTION返回上傳結(jié)果操作

    這篇文章主要介紹了VUE UPLOAD 通過ACTION返回上傳結(jié)果操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • 手寫vue無限滾動指令的詳細過程

    手寫vue無限滾動指令的詳細過程

    今天在移動端項目中遇見一個需求,需要數(shù)據(jù)無限滾動,所以下面這篇文章主要給大家介紹了關(guān)于手寫vue無限滾動指令的詳細過程,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-09-09
  • 解決vue項目 build之后資源文件找不到的問題

    解決vue項目 build之后資源文件找不到的問題

    這篇文章主要介紹了解決vue項目 build之后資源文件找不到的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • vue自動添加瀏覽器兼容前后綴操作

    vue自動添加瀏覽器兼容前后綴操作

    這篇文章主要介紹了vue自動添加瀏覽器兼容前后綴操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • 關(guān)于net?6+vue?插件axios?后端接收參數(shù)問題

    關(guān)于net?6+vue?插件axios?后端接收參數(shù)問題

    接到這樣一個項目需求是這樣的,前端vue?必須對象傳遞后端也必須對象接收,接下來通過本文給大家介紹下net?6+vue?插件axios?后端接收參數(shù)的問題,需要的朋友可以參考下
    2022-01-01
  • Vue 組件如何模塊化抽離Props

    Vue 組件如何模塊化抽離Props

    這篇文章主要介紹了Vue 組件如何模塊化抽離Props的相關(guān)知識,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2023-11-11
  • Vue在chrome44偶現(xiàn)點擊子元素事件無法冒泡的解決方法

    Vue在chrome44偶現(xiàn)點擊子元素事件無法冒泡的解決方法

    這篇文章主要給大家介紹了關(guān)于Vue在chrome44偶現(xiàn)點擊子元素事件無法冒泡的解決方法,文中通過示例代碼介紹的非常詳細,對大家學習或者使用Vue具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
    2019-12-12
  • 淺析vue3的setup的使用和原理

    淺析vue3的setup的使用和原理

    setup是Vue3中引入的一個新的組件選項,是Vue3中函數(shù)式組件的核心部分,它提供了一種新的方式來編寫組件邏輯,下面就來和大家講講它的使用和原理
    2023-08-08
  • Vue封裝的組件全局注冊并引用

    Vue封裝的組件全局注冊并引用

    這篇文章主要為大家詳細介紹了Vue封裝的組件全局注冊并引用,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-07-07

最新評論