vue对数据的监听是同步的还是异步的?是如何对数据进行监听的?
什么是nextTick()
nextTick是将回调函数延迟到下次DOM树更新时触发.所以第一个问题的答案是:1.异步的 2.nextTick()
什么时候使用nextTick()
场景1.created()中
在created钩子函数中对dom进行操作时.
因为created时dom树还没有被渲染,所以对dom树的操作都是徒劳的,如果想在此时对dom树进行操作,只能将操作内容放在nextTick中,即,当dom树发生更新时执行.
created(){
let that = this //让方法的this指向实例
that.$nextTick(function(){
//dom操作
})
}
场景2.更新数据后立即用js操作识图
//以修改某dom的文本为例
data:{testMsg:"原始值"},
methods:{
changeTxt(){
let that=this;
that.testMsg="修改后的文本值"; //修改dom结构
that.$nextTick(function(){ //使用vue.$nextTick()方法可以dom数据更新后延迟执行
let domTxt=document.getElementById('h').innerText;
console.log(domTxt); //输出可以看到vue数据修改后并没有DOM没有立即更新，
if(domTxt==="原始值"){
console.log("文本data被修改后dom内容没立即更新");
}else {
console.log("文本data被修改后dom内容被马上更新了");
}
});
}}
场景3.在使用某些第三方插件时
某些第三方插件可能会希望在dom树刷新后应用.
