watch+$nextTick

watch

vue中watch来监视data数据的变化，当被监视的数据发生变化watch中定义的相关方法便会调用，也可以监听异步操作。
语法

watch: {
	被监听的数据: {
		immediate: true|false,    // 是否一上来直接监视，不写默认是false
		deep: true|false,         // 是否开启深度监视，不写默认是false  
		handler(数据改变后的值, 数据改变之前的值) {
			相关代码逻辑...
		}                         // 监视的回调,不可不写
	}
}

$nextTick

在Vue在更新DOM的时候，是异步执行的。只要监听到数据变化，vue将开启一个队列，并缓存在同一个事件循环中发生的所有数据变更。如果同一个watcher被多次触发，只会被推入队列中一次。
什么是 Vue.nextTick()
**定义：**在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后DOM。理解：nextTick()，是将回调函数延迟在下次dom更新数据后调用。简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数。

  methods:{
    testClick:function(){
      let that=this;
      that.testMsg="修改后的值";
      that.$nextTick(function(){
        console.log(that.$refs.aa.innerText);  //输出：修改后的值
      });
    }
  }

**A：**Vue实现响应式并不是数据发生变化之后DOM立即变化，而是按一定的策略进行DOM的更新。$nextTick是在下次DOM更新循环循环结束之后执行延迟回调，在修改数据之后使用$nextTick，则可以在回调中获取更新后的DOM。

B: Vue生命周期的created（）钩子函数进行的DOM操作一定要放在Vue.nextTick（）的回调函数中，原因是在created()钩子函数执行的时候DOM其实并未进行任何渲染，此时i进行DOM操作无用。所以一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与值对应的就是mounted钩子函数，因为钩子函数执行时所有的DOM挂载完成。
当项目中想要改变DOM元素的数据后基于新的DOM操作，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它。
正确的用法是：Vue改变dom元素结构后使用vue.$nextTick()方法来实现dom数据更新后延迟执行后续代码：

    changeTxt:function(){
      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内容被马上更新了");
        }
      });
    },

Wtach+$nextTick()

通过watch监听数据变化，即监视到我们已经获取这个数据。这个时候数据还没驱动视图变化，只是缓存在了同一事件循环中，这个时候如果要根据这个数据渲染出的DOM元素进行某些操作的时候，往往就需要watch中使用$nextTick()。

watch+$nextTick:
	实现数据更新后,界面更新时重新渲染数据
	watch:{
		xx：{
		immediate: true|false,    // 是否一上来直接监视，不写默认是false
		deep: true|false,    // 是否开启深度监视，不写默认是false  
		handler(newValue, oldValue) {
			this.$nextTick(()=>{
				进行诸如拿到数据再创建实例等操作
			})
		}
	}

实际应该用场景：在轮播图展示的数据需要由别的组件传递过来的时候，我们要在页面中渲染出轮播图结构之后才能监视这个轮播图，给他设置左右按钮，分页器等操作。

watch:{
    bannerList: {
      handler(newValue,oldValue) {
        //现在我们通过watch监听bannerList属性的属性值的变化
        //如果执行handler方法,代表组件身上这个属性已经有了[数组:四个元素]
        //当前这个函数执行:只能保证bannerList数据已经有了,但是没办法保证v-for已经执行结束了
        //v-for执行完毕,才有结构[你现在在watch当中没办法保证的]
        //nextTick:在下次DOM更新 循环结束之后 执行延迟回调。在修改数据之后 立即使用这个方法，获取更新后的 DOM。
        this.$nextTick(()=>{
          //当你执行这个回调的时候,保证服务器数据回来了,v-for执行完毕了[一定轮播图的结构有了]
              var mySwiper = new Swiper(document.querySelector('.swiper-container'), {
              //第一个参数：设置轮播图方向【属性这有两个：水平、垂直】
              // direction: 'vertical', 
              // 开启循环模式
              loop: true,
              // 如果需要分页器
              pagination: {
                  el: '.swiper-pagination',
                  //点击小球的时候也切换图片
                  clickable:true 
              },
      
              // 如果需要前进后退按钮
              navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
              },
          });
        })
      }
    }
  }