关于vue框架中的nextTick

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树刷新后应用.