vue 監(jiān)聽窗口變化對頁面部分元素重新渲染操作
更新時間：2020年07月28日 08:45:11 作者：lwlcode
這篇文章主要介紹了vue 監(jiān)聽窗口變化對頁面部分元素重新渲染操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
問題
在處理頁面重新渲染時通常的做法是：
用vue-router重新路由到當(dāng)前頁面，頁面是不進行刷新的
采用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常見的事件修飾符,在平時無論是面試還是學(xué)習(xí)工作中都會經(jīng)常遇到的,本文就帶你快速上手,需要的朋友可以參考下2023-03-03
Vue web前端三大主流框架之一,是一套用于構(gòu)建用戶界面的漸進式框架,下面這篇文章主要給大家介紹了關(guān)于Vue安裝與配置教程的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細介紹了vue右鍵菜單的簡單封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
本文主要介紹了vue中keep-alive多級路由緩存問題，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
在實際業(yè)務(wù)中，我們常用圖表來做數(shù)據(jù)統(tǒng)計，數(shù)據(jù)展示，數(shù)據(jù)可視化等比較直觀的方式來達到一目了然的數(shù)據(jù)查看，但在大屏開發(fā)過程中，常會因為適配不同屏幕而感到困擾，下面我們來解決一下這個不算難題的難題2022-11-11
這篇文章主要介紹了Vue.js動態(tài)添加、刪除選題的實例代碼,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-09-09
在 Vue 3 中,.sync 修飾符已經(jīng)被移除,在 Vue 2 中,.sync 修飾符是一個語法糖,用于簡化子組件和父組件之間的雙向數(shù)據(jù)綁定,那么本文將給大家介紹一下vue3中不支持.sync語法糖的解決方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了element-ui多選表格禁用某一行不被選擇問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue如何通過id從列表頁跳轉(zhuǎn)到對應(yīng)的詳情頁
這篇文章主要介紹了vue如何通過id從列表頁跳轉(zhuǎn)到對應(yīng)的詳情頁 ,需要的朋友可以參考下2018-05-05
Vue項目打包(build)時,自動打以時間命名的壓縮包方式
這篇文章主要介紹了Vue項目打包(build)時,自動打以時間命名的壓縮包方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10