vue watch+$nextTick界面更新渲染数据

我就是我 2021-07-24 19:03 839阅读 0赞

Vue更新时机:
    	1.Vue在更新DOM时是异步执行的。
    	2.只要侦听到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。
    	3.如果同一个watcher被多次触发,只会被推入到队列中一次。
    	4.在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。
    	5.Vue在内部对异步队列尝试使用原生的(微任务)Promise.then、MutationObserver和setImmediate,如果执行环境不支持,则会采用(宏任务)setTimeout(fn, 0) 代替。
    
    更新时对应的钩子函数:
    	方式一:
    		this.$nextTick(fn)
    	
    	方式二:
    		因为$nextTick()返回一个Promise对象,所以你可以使用async/await语法完成相同的事情
    	
    		await this.$nextTick()	await返回更新后的组件实例,且会等待this.$nextTick()结束再执行后续操作
    		...更新后操作
    		
      	方式三:
      		Vue.nextTick(fn);	自身返回一个Promise对象
      		Vue.nextTick()
    		  .then(function () {
    		    	DOM更新了
    		  })
      		
      	
    watch:
    	监测数据改变,数据改变后此时数据更新,但界面未更新
    
    wathc+$nextTick:
    	实现数据更新后,界面更新时重新渲染数据
    	
    	watch:{
    		xx(value){
    			this.$nextTick(()=>{
    				进行诸如拿到数据再创建实例等操作
    			})
    		}
    	}

代码示例:

<div id="example">{ { message}}</div>
    var vm = new Vue({ 
      el: '#example',
      data: { 
        message: '123'
      }
    })
    vm.message = 'new message' // 更改数据
    vm.$el.textContent === 'new message' // false textContent会返回浏览器最新的数据
    Vue.nextTick(function () { 
      vm.$el.textContent === 'new message' // true
    })
    
    ====================================================
    methods: { 
      updateMessage: async function () { 
        this.message = '已更新'
        console.log(this.$el.textContent) // => '未更新'
        await this.$nextTick()
        console.log(this.$el.textContent) // => '已更新'
      }
    }