使用this.$nextTick()獲取不到數(shù)據(jù)更新后的this.$refs.xxx.及場(chǎng)景分析
使用this.$nextTick()獲取不到數(shù)據(jù)更新后的this.$refs.xxx.
今天遇到了這樣一個(gè)場(chǎng)景,在數(shù)據(jù)更新之后,使用this.$nextTick(()=>{console.log(this.$refs.xxx)}) 獲取不到改dom,但是用setTimeout能夠獲取到,在此記錄一下。
先看代碼
<!--這是模板代碼,父級(jí)用的v-else-if,與父級(jí)同級(jí)的還有兩個(gè)盒子,分別用v-if和v-else控制著--> <div ref="articleContent" class="right" v-html="articles.content"></div> //這是script代碼 mounted() { this.getArticlesDetail() }, methods: { async getArticlesDetail(){ try { const {data}= await getArticlesDetail(this.articleId); /* vue數(shù)據(jù)更新是異步的 ,在這一步數(shù)據(jù)加載出來,但是組件還沒沒有渲染出來,因?yàn)樵诮M件中有個(gè)v-if判斷,在數(shù)據(jù)加載出來之后,才能渲染出來組件*/ /* console.log(this.$refs.articleContent) */ /* 所以要放在定時(shí)器是異步執(zhí)行,試了用this.$nextTick,不行 */ /* */ this.articles = data /* 只能用setitmeout是因?yàn)閿?shù)據(jù)在在下個(gè)Event Loop中也出不來,這是因?yàn)関-if中的條件在下次事件循環(huán)中也不一定能夠滿足。但是setTimeout的執(zhí)行時(shí)機(jī)是沒有辦法確定前邊的任務(wù)到底需要多長(zhǎng)時(shí)間執(zhí)行完 */ this.$nextTick(() => { console.log(this.$refs.articleContent) }); console.log(data) } catch (error) { if(error.response && error.response.status===404){ this.errStatus=404; this.$toast('服務(wù)器錯(cuò)誤') } console.log(error) this.$toast('請(qǐng)求失敗,請(qǐng)稍后再試') } /* 無論成功失敗都要調(diào)用loading為false,關(guān)閉它 */ this.loading=false } },
這是控制臺(tái)打印的效果.
獲取不到.
vue官網(wǎng)中對(duì)于vue.nextTick()中的解釋:
也就是說在下個(gè)事件循環(huán)中沒有滿足v-if中的條件,所以沒有獲取到數(shù)據(jù)。
在vue 中的devtools中 可以獲取到。
然后我們修改成setTimeout
<!--這是模板代碼,父級(jí)用的v-else-if,與父級(jí)同級(jí)的還有兩個(gè)盒子,分別用v-if和v-else控制著--> <div ref="articleContent" class="right" v-html="articles.content"></div> //這是script代碼 mounted() { this.getArticlesDetail() }, methods: { async getArticlesDetail(){ try { const {data}= await getArticlesDetail(this.articleId); /* vue數(shù)據(jù)更新是異步的 ,在這一步數(shù)據(jù)加載出來,但是組件還沒沒有渲染出來,因?yàn)樵诮M件中有個(gè)v-if判斷,在數(shù)據(jù)加載出來之后,才能渲染出來組件*/ /* console.log(this.$refs.articleContent) */ /* 所以要放在定時(shí)器是異步執(zhí)行,試了用this.$nextTick,不行 */ /* */ this.articles = data /* 只能用setitmeout是因?yàn)閿?shù)據(jù)在在下個(gè)Event Loop中也出不來,這是因?yàn)関-if中的條件在下次事件循環(huán)中也不一定能夠滿足。但是setTimeout的執(zhí)行時(shí)機(jī)是沒有辦法確定前邊的任務(wù)到底需要多長(zhǎng)時(shí)間執(zhí)行完 */ setTimeout(() => { console.log(this.$refs.articleContent) }); console.log(data) } catch (error) { if(error.response && error.response.status===404){ this.errStatus=404; this.$toast('服務(wù)器錯(cuò)誤') } console.log(error) this.$toast('請(qǐng)求失敗,請(qǐng)稍后再試') } /* 無論成功失敗都要調(diào)用loading為false,關(guān)閉它 */ this.loading=false } },
這是控制臺(tái)打印的效果
可以看出來有效果.
在vue中的devtools中也有,
這是為什么呢?
只能用setitmeout是因?yàn)閿?shù)據(jù)在在下個(gè)Event Loop中也出不來,這是因?yàn)関-if中的條件在下次事件循環(huán)中也不一定能夠滿足。但是setTimeout的執(zhí)行時(shí)機(jī)是沒有辦法確定前邊的任務(wù)到底需要多長(zhǎng)時(shí)間執(zhí)行完,所以使用setTimeout會(huì)更好。
補(bǔ)充:詳解Vue中this.$nextTick()用法
語法:
this.$nextTick( [ callback ] )
用法:
this.$nextTick將回調(diào)延遲到下次 DOM 更新循環(huán)之后執(zhí)行。在修改數(shù)據(jù)之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick
一樣,不同的是回調(diào)的 this
自動(dòng)綁定到調(diào)用它的實(shí)例上,等同于updated生命周期函數(shù)
updated用法:由于數(shù)據(jù)更改導(dǎo)致的虛擬 DOM 重新渲染和打補(bǔ)丁,在這之后會(huì)調(diào)用該鉤子。當(dāng)這個(gè)鉤子被調(diào)用時(shí),組件 DOM 已經(jīng)更新,所以你現(xiàn)在可以執(zhí)行依賴于 DOM 的操作。
示例:
下面講解一個(gè)點(diǎn)擊按鈕是輸入框聚焦的示例:
<template> <div> <input ref="myInp" type="text" placeholder="這是一個(gè)輸入框" v-if="isShow"> <button v-else @click="btn">點(diǎn)擊我進(jìn)行搜索</button> </div> </template> <script> // 獲取到輸入框 // 輸入框調(diào)用事件方法focus()達(dá)到聚焦行為 export default { data(){ return { isShow: false } }, methods: { btn(){ this.isShow = true; this.$refs.myInp.focus(); // 沒有效果 // 原因: data變化更新DOM是異步的 // 輸入框還沒有掛載到真實(shí)DOM上 // 解決: // this.$nextTick(() => { // this.$refs.myInp.focus() // }) } //async btn(){ // this.isShow = true; // // // 擴(kuò)展: await取代回調(diào)函數(shù) // // $nextTick()原地返回Promise對(duì)象 // await this.$nextTick() // this.$refs.myInp.focus() //} }, //擴(kuò)展 updated(){ // this.$refs.myInp.focus() } } </script>
直接在methods獲取DOM調(diào)用聚焦方法是沒有效果的,更改之后的文本是需要 dom 更新之后才會(huì)實(shí)現(xiàn)的,就像我們把將要打印輸出的代碼放在 setTimeout(fn, 0) 中,這時(shí)候用this.$nextTick就能合理解決此問題,如果我們想進(jìn)頁(yè)面就處于聚焦?fàn)顟B(tài)的話就可以使用updated生命周期函數(shù),調(diào)用時(shí),組件DOM已經(jīng)更新,所以可以執(zhí)行依賴于DOM的操作
到此這篇關(guān)于使用this.$nextTick()獲取不到數(shù)據(jù)更新后的this.$refs.xxx.及場(chǎng)景分析的文章就介紹到這了,更多相關(guān)this.$nextTick()獲取不到數(shù)據(jù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
關(guān)于vue.js組件數(shù)據(jù)流的問題
本篇文章主要介紹了關(guān)于vue.js組件數(shù)據(jù)流的問題,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07vue router返回到指定的路由的場(chǎng)景分析
這篇文章主要介紹了vue router返回到指定的路由的場(chǎng)景分析,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-11-11php+vue3實(shí)現(xiàn)點(diǎn)選驗(yàn)證碼功能
這篇文章主要介紹了php+vue3實(shí)現(xiàn)點(diǎn)選驗(yàn)證碼,本文通過實(shí)例代碼給大家介紹的詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11vue父組件傳值子組件報(bào)錯(cuò)Avoid?mutating?a?prop?directly解決
這篇文章主要為大家介紹了vue父組件傳值子組件報(bào)錯(cuò)Avoid?mutating?a?prop?directly解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09VUE項(xiàng)目中引入vue-router的詳細(xì)過程
vue-router 也叫 vue 路由,根據(jù)不同的路徑,來執(zhí)行不同的組件,這篇文章主要介紹了VUE項(xiàng)目中引入vue-router,需要的朋友可以參考下2023-05-05