2. 程式人生 > >vue 非同步更新佇列 $nextTick

vue 非同步更新佇列 $nextTick

阿新 • • 發佈：2019-01-20

Vue 非同步執行 DOM 更新。只要觀察到資料變化，Vue 將開啟一個佇列，並緩衝在同一事件迴圈中發生的所有資料改變。如果同一個 watcher 被多次觸發，只會被推入到佇列中一次。如果你想在 DOM 狀態更新後做點什麼，這就可能會有些棘手。雖然 Vue.js 通常鼓勵開發人員沿著“資料驅動”的方式思考，避免直接接觸 DOM，但是有時我們確實要這麼做。為了在資料變化之後等待 Vue 完成更新 DOM ，可以在資料變化之後立即使用 Vue.nextTick(callback)

下面寫一個 柱狀圖自適應寬度的demo

直接上程式碼

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			border: 1px solid skyblue;
		}
		.case{
			width: 100%;
			height: 200px;
		}
		.cWidth{
			width : 400px;
		}
	</style>
</head>
<body>
	<div id="app">
		<div :class="{box : true, cWidth : changeWidth}">
			<div class="case" id="demo"></div>
		</div>
		<button @click="changeW">改變寬</button>
	</div>
</body>	
	<script src="https://cdn.bootcss.com/vue/2.5.11/vue.js"></script>
	<script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.min.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data : {
				changeWidth : false,
				chart : null
			},
			mounted(){
				var demo = document.getElementById("demo");
				let myChart = echarts.init(demo);
				this.chart = myChart;
		        myChart.setOption({
		            title: { text: '在Vue中使用echarts' },
		            tooltip: {},
		            xAxis: {
		                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
		            },
		            yAxis: {},
		            series: [{
		                name: '銷量',
		                type: 'bar',
		                data: [5, 20, 36, 10, 10, 20]
		            }]
		        });
			},
			methods :{
				changeW : function(){
					this.changeWidth = !this.changeWidth;//改變寬度
					// this.chart.resize();//如果直接resize,柱狀圖並不會自適應寬度
					this.$nextTick(()=>{//在Dom更新後呼叫resize,柱狀圖就會自適應
						this.chart.resize();
					})
				}
			}
		})
	</script>
</html>

相關推薦

vue 非同步更新佇列 $nextTick

Vue 非同步執行 DOM 更新。只要觀察到資料變化，Vue 將開啟一個佇列，並緩衝在同一事件迴圈中發生的所有資料改變。如果同一個 watcher 被多次觸發，只會被推入到佇列中一次。如果你想在 DOM

Vue原始碼閱讀- 批量非同步更新與nextTick原理

vue已是目前國內前端web端三分天下之一，同時也作為本人主要技術棧之一，在日常使用中知其然也好奇著所以然，另外最近的社群湧現了一大票vue原始碼閱讀類的文章，在下借這個機會從大家的文章和討論中汲取了一些營養，同時對一些閱讀原始碼時的想法進行總結，出產一些文章，作為自己思考的總

vue的非同步更新佇列 $nextTick

<div id="box"> <div id="div" v-if="showDiv">這是一段文字</div> <button @click="getText">獲取div的內容</button> &l

Vue.js非同步更新及nextTick

寫在前面 前段時間在寫專案時對nextTick的使用有一些疑惑。在查閱各種資料之後，在這裡總結一下Vue.js非同步更新的策略以及nextTick的用途和原理。如有總結錯誤的地方，歡迎指出！ 本文將從以下3點進行總結： 為什麼Vue.js要非同步更新檢視？ Jav

從Vue.js原始碼看非同步更新DOM策略及nextTick

寫在前面 因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js原始碼，並做了總結與輸出。 文章的原地址：https://github.com/answershuto/learnVue。 在學習過程中，為Vue加上了中文的註釋https:/

Vue.js 內部執行機制（六）---- 批量非同步更新策略及 nextTick 原理

之前我們學到了 Vue 更新資料是如何更新檢視的。 簡單回顧 資料更新（setter）-> 通知依賴收集集合（Dep） -> 呼叫所有觀察者（Watcher） -> 比對節點樹（patch） -> 檢視 在更新檢視這一步，使用非同步更新策略 為

Vue.js原始碼解析(八)【Vue.js非同步更新DOM策略及nextTick】

操作DOM 在使用vue.js的時候，有時候因為一些特定的業務場景，不得不去操作DOM，比如這樣： <template> <div> <div ref="test">{{test}}</div>

vue:非同步async and await與this.nextTick()的使用

專案例子： async focusInput (index) { await this.$nextTick(() => { let el = this.$refs[`scopeInput-${index}`].$el let input = el.querySe

Vuejs中nextTick()非同步更新佇列原始碼解析

vue官網關於此解釋說明如下： vue2.0裡面的深入響應式原理的非同步更新佇列 官網說明如下： 只要觀察到資料變化，Vue 將開啟一個佇列，並緩衝在同一事件迴圈中發生的所有資料改變。如果同一個 watcher 被多次觸發，只會一次推入到佇列中。這種在緩衝

Vue 父元件ajax非同步更新資料，子元件props獲取不到

當父元件  axjos  獲取資料，子元件使用  props  接收資料時，執行  mounted  的時候  axjos  還沒有返回資料，而且  mounted 只執行一次，這時   props  中接收的資料為空解決方案：在對應元件中判斷資料的長度

Vue data更新了，但檢視未更新

問題：使用 Vue.set(target,key,value) 或 this.$set(target, key, value) 更新data中json物件的資料後，檢視層還是沒有更新（data的資料更新了）。   解決方法： 使用 Vue.delete(target,key) 或

vue專案實現按需載入的3種方式：vue非同步元件、es提案的import()、webpack的require.ensure()

1. vue非同步元件技術 vue-router配置路由，使用vue的非同步元件技術，可以實現按需載入。 但是，這種情況下一個元件生成一個js檔案。 舉例如下： { path: '/promisedemo', na

Vue非同步元件處理路由元件載入狀態

問題場景 在大型單頁面應用中，處於對效能的考慮和首屏載入速度的要求，我們一般都會使用webpack的程式碼分割和vue-router的路由懶載入功能將我們的程式碼分成一個個模組，並且只在需要的時候才從伺服器載入一個模組。 但是這種解決方案也有其問題，當網路環境較差時，我們去首次訪

記錄Vue非同步載入百度地圖

網上搜了不少資料都是index.html直接加script，個人是不喜歡這種方式，畢竟有時候只有一個頁面需要到百度地圖，沒必要全域性都載入百度地圖的檔案 單獨新建一個js檔案：loadBMap.js，名字隨意取，位置可以隨便放 export default function load

React 部落格系列 (3) Promise非同步更新React狀態

Promise封裝axios資料查詢 github個人部落格原始碼持續更新中。。。 小白在實施的過程中，前端請求資料重新整理資料遇到了資料同步的問題。 資料請求方法 getAtricles() { console.log("getAtr

Vue.js中this.$nextTick()的使用

method template ima get() dom操作 交互 技術 bubuko -s this.$nextTick()將回調延遲到下次 DOM 更新循環之後執行。在修改數據之後立即使用它，然後等待 DOM 更新。它跟全局方法 Vue.nextTick 一樣，不同的

vue:非同步async and await

async 非同步，會再最後執行 async function timeout() { return 'hello world' } console.log(timeout()); console.log('先執行'); 如果async 函式中有返回一個值 ,當呼叫該函式時

Vue原始碼解析之nextTick

Vue原始碼解析之nextTick 前言 nextTick是Vue的一個核心功能，在Vue內部實現中也經常用到nextTick。但是，很多新手不理解nextTick的原理，甚至不清楚nextTick的作用。 那麼，我們就先來看看nextTick是什麼。 nextTick功能 看看

NotifyPropertyChanged執行緒與介面繫結非同步更新

         為了解決NotifyPorpertyChanged的執行緒與介面繫結非同步更新衝突問題，所以檢視相關資料後，將自己的NotifyPropertyChanged作了改進。 1.問題起因         在開發C#應用程式，通常後使用到介面控制元件特定屬性（

非同步更新快取的邏輯

前言 高併發場景下使用快取可以有效降低併發QPS對於資料庫的壓力，但是使用快取就必須面對資料一致性的問題。 高併發處理 有效利用java多執行緒特性平行計算，充分利用CPU資源。 在序列化處理上考慮更好的工具，比如之前資料是用XML，JSON儲存，隨著訪問量的飆升，CPU和頻寬帶來了很大的壓力，後來我們自己定