vue 監(jiān)聽窗口變化對頁面部分元素重新渲染操作
更新時間：2020年07月28日 08:45:11 作者：lwlcode
這篇文章主要介紹了vue 監(jiān)聽窗口變化對頁面部分元素重新渲染操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
問題
在處理頁面重新渲染時通常的做法是：
用vue-router重新路由到當前頁面，頁面是不進行刷新的
采用window.reload()，或者router.go(0)刷新時，整個瀏覽器進行了重新加載，閃爍，體驗不好
使用 v-if 重新渲染部分組件或容器
需要重新渲染的內(nèi)容
<div v-if="render"> ... </div>
vue 監(jiān)聽窗口大小發(fā)生改變
使用 window.addEventListener() 添加 resize 事件監(jiān)聽窗口變化
new Vue({
el: '#app',
data() {
return { render: true }
},
mounted() {
window.addEventListener('resize', this.reload)
},
beforeDestroy() {
window.removeEventListener('resize', this.reload)
},
methods: {
reload() {
// 重新渲染
this.render = false
this.$nextTick(() => {
this.render = true
})
}
}
})
補充知識：vue同一個路由,但參數(shù)發(fā)生變化，頁面不刷新的問題（vue監(jiān)聽路由參數(shù)變化重新渲染頁面）
我就廢話不多說了，大家還是直接看代碼吧~
watch: {
$route: function(newVal, oldVal) {
console.log(oldVal); //oldVa 上一次url
console.log(newVal); //newVal 這一次的url
if (newVal != oldVal) {
this.loading();//重新調(diào)用加載函數(shù)
}
}
}
以上這篇vue 監(jiān)聽窗口變化對頁面部分元素重新渲染操作就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中的.capture和.self區(qū)分及初步理解
這篇文章主要介紹了vue中的.capture和.self區(qū)分及初步理解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了Vue3通用API功能示例剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要為大家介紹了vue?實現(xiàn)滑動塊解鎖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
在本篇文章里小編給大家整理的是一篇關(guān)于Vue+ElementUI怎么處理超大表單實例講解內(nèi)容，以后需要的朋友可以跟著學(xué)習(xí)參考下。2021-11-11
這篇文章主要介紹了vue3?使用defineExpose的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-03-03
vue使用element實現(xiàn)上傳圖片和修改圖片功能
前幾天做到一個關(guān)于圖片上傳功能,下面這篇文章主要給大家介紹了關(guān)于vue使用element實現(xiàn)上傳圖片和修改圖片功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
vue結(jié)合vant實現(xiàn)聯(lián)動效果
這篇文章主要為大家詳細介紹了vue結(jié)合vant實現(xiàn)聯(lián)動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章主要介紹了Vue中的前端crypto.js加解密問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了mpvue+vuex搭建小程序詳細教程(完整步驟)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
Vue3項目pc端瀏覽器樣式正常但移動端部分樣式失效問題的解決方法
這篇文章主要介紹了Vue3項目pc端瀏覽器樣式正常但移動端部分樣式失效問題的解決方法,文中通過圖文講解的非常詳細,具有一定的參考價值,需要的朋友可以參考下2024-07-07