vue学习(八)nextTick[异步更新队列]的使用和应用
nextTick的使用
为了数据变化之后等待vue完成更新DOM,可以在数据变化之后立即使用Vue.nextTick()在当前的回调函数中能获取最新的DOM
<div id="app"> <h3>{{msg}}</h3> </div> <script> let app = new Vue({ el:'#app', data:{ msg:'晓强' }, }) app.msg = '新的数据-晓强' // console.log(app.$el.textContent) // 为了数据变化之后等待vue完成更新DOM,可以在数据变化之后立即使用Vue.nextTick() // 在当前的回调函数中能获取最新的DOM Vue.nextTick(()=>{ console.log(app.$el.textContent) }) </script>
nextTick的应用
看下面的代码
<div id="app"> <App></App> </div> <script> /* * 需求: * 在页面拉取一个接口,这个接口返回一些数据,这些数据是这个页面的一个浮层组件要依赖的, * 然后我在接口,一返回数据就展示了这个浮层组件, * 展示的同时上报一些数据给后台(这些数据是父组件从接口拿的) * 这个时候,神奇的事件发生了,虽然我拿到了数据了,但是浮层展现的时候, * 这些数据还未更新到组件上去,上报失败 * */ const Pop = { data() { return { isShow: false } }, props:{ name:{ type: String, default:'' } }, template: ` <div v-if="isShow"> {{name}} </div> `, methods: { show() { this.isShow=true; console.log(this.name) } }, }; const App = { data() { return { name: '' } }, created() { // 模拟异步请求 setTimeout(()=>{ this.name='晓强'; this.$refs.pop.show(); },1000) }, components: { Pop }, template: `<pop ref='pop' :name="name"></pop>` }; let app = new Vue({ el: '#app', components: { App }, }) </script>
看下图一秒钟之后 页面显示 但是console.log没有内容
修改如下:
this.$nextTick(()=>{ this.$refs.pop.show(); })