重慶達內IT培訓
美國上市IT培訓機構

15023458194

重慶web前端培訓班:Vue之組件重新渲染

  • 時間:2021-04-12 13:58
  • 發布:重慶達內
  • 來源:重慶達內

前言

據網上流傳,有關Vue組件重新渲染的方案往往存在如下四種。

1、借助route機制,刷新整個頁面

2、使用v-if,將組件銷毀、重新加載

3、使用內置的forceUpdate方法

4、使用key-changing優化組件

前兩種沒什么好說的,并且考慮到效率問題,本次主要是記錄forceUpdate和key-changing兩種組件渲染方法(不支持uni-app編寫小程序)

force update

組件內置$forceUpdate方法,使用前需要在配置中啟用。

import Vue from 'vue'

Vue.forceUpdate()

export default {

methods: {

handleUpdateClick() {

// built-in

this.$forceUpdate()

}

}

}

key-changing

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

template

div

span :key="key" /span

/div

/templatescript

export default {

data() {

return {

key: 0

}

},

methods: {

handleUpdateClick() {

this.key += 1

}

}

}

/script

上一篇:重慶WEB前端培訓班:箭頭函數的副作用
下一篇:沒有下一篇了

重慶WEB前端培訓班:箭頭函數的副作用

重慶web前端培訓機構:jQuery中的入口函數

重慶web前端培訓:圖像樣式

重慶web前端培訓班:圖片裁切

  • 關注微信公眾號

    回復關鍵字:視頻資料

    免費領取 達內課程視頻學習資料

  • 視頻學習QQ群

    添加QQ群:1143617948

    免費領取達內課程視頻學習資料

Copyright ? 2018 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

選擇城市和中心
江西省

貴州省

廣西省

海南省

免费V片无码动漫在线观看网址-男人的天堂无码动漫av