Vue-vue中的window.onload=＞nextTick

最新推荐文章于 2024-04-09 14:11:35 发布

H5_ljy

最新推荐文章于 2024-04-09 14:11:35 发布

阅读量3.9k

点赞数

分类专栏： Vue 文章标签： vue.js echarts javascript

本文链接：https://blog.csdn.net/qq_56973906/article/details/126712348

版权

Vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

文章目录

nextTick的作用
nextTick的使用场景
如何使用
案例一生命周期函数中的使用
案例二 ECharts引入

nextTick的作用

相当于window.onload;
使用nextTick就能再组件加载完了以后才运行。

nextTick的使用场景

当改变数据，视图没有按预期渲染时；都应该考虑是否是因为本需要在dom执行完再执行，然而实际却在dom没有执行完就执行了代码，如果是就考虑使用将逻辑放到nextTick中，有的时候业务操作复杂，有些操作可能需要更晚一些执行，放在nextTick中仍然没有达到预期效果，这个时候可以考虑使用setTimeout，将逻辑放到宏任务中。

如何使用

语法：Vue.nextTick([callback, context])
参数：
{Function} [callback]：回调函数，不传时提供promise调用
{Object} [context]：回调函数执行的上下文环境，不传默认是自动绑定到调用它的实例上。

案例一生命周期函数中的使用

		<div id='app'>
			<h2>{{msg}}</p>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					msg:"hello"
				},
				methods: {},
				beforeCreate(){
					console.log(this.msg)
					this.$nextTick(()=>{
						console.log(this.msg)
						this.msg="ljy666"
					})
				}
				
			})
		</script>

在这里插入图片描述
可以看到我们直接在beforeCreate中去获取data中的msg是没有定义的，而放在nextTick中就可以获取并更改了

案例二 ECharts引入

直接引入会导致无法获取到box中的宽高

		<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.12/vue.js"></script>
		<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.3.0-rc.1/echarts.js"></script>
	</head>
	<body>
		<style type="text/css">
			.box {
				width: 500px;
				height: 500px;
			}
		</style>
		<div id='app'>
			<div class="box" v-echarts>

			</div>
		</div>
		<script>
			var vm = new Vue({
				el: '#app',
				directives: {
					echarts: {
						inserted(el) {
                           Vue.nextTick(()=>{
							   var myChart = echarts.init(el);
							   let options={
							   	title: {
							   		text: 'Referer of a Website',
							   		subtext: 'Fake Data',
							   		left: 'center'
							   	},
							   	tooltip: {
							   		trigger: 'item'
							   	},
							   	legend: {
							   		orient: 'vertical',
							   		left: 'left'
							   	},
							   	series: [{
							   		name: 'Access From',
							   		type: 'pie',
							   		radius: '50%',
							   		data: [{
							   				value: 1048,
							   				name: 'Search Engine'
							   			},
							   			{
							   				value: 735,
							   				name: 'Direct'
							   			},
							   			{
							   				value: 580,
							   				name: 'Email'
							   			},
							   			{
							   				value: 484,
							   				name: 'Union Ads'
							   			},
							   			{
							   				value: 300,
							   				name: 'Video Ads'
							   			}
							   		],
							   		emphasis: {
							   			itemStyle: {
							   				shadowBlur: 10,
							   				shadowOffsetX: 0,
							   				shadowColor: 'rgba(0, 0, 0, 0.5)'
							   			}
							   		}
							   	}]
							   }
							   myChart.setOption(options)
						   })
						}
					}
				}
			})
		</script>

在这里插入图片描述

H5_ljy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue-vue中的window.onload=＞nextTick

都应该考虑是否是因为本需要在dom执行完再执行，然而实际却在dom没有执行完就执行了代码，如果是就考虑使用将逻辑放到nextTick中，有的时候业务操作复杂，有些操作可能需要更晚一些执行，放在nextTick中仍然没有达到预期效果，这个时候可以考虑使用setTimeout，将逻辑放到宏任务中。{Object} [context]：回调函数执行的上下文环境，不传默认是自动绑定到调用它的实例上。{Function} [callback]：回调函数，不传时提供promise调用。
复制链接

扫一扫