用$nextTick解决vue中ref等属性失效的问题

       vue项目中组件的初始化以及数据填充、更新都是需要一定的时间的，而且这些更新是异步进行的，UI渲染线程和JS主线程并不是同一个线程，所以在开发的时候极有可能遇到的情况是，引用子组件后，子组件显示出来了但是父组件的ref属性并没有找到子组件，这就要用到vue中的$nextTick方法来解决。

先看看官方对这个方法的说明如下：

Vue.nextTick( [callback, context] )

• 参数：

  • {Function} [callback]
  • {Object} [context]

• 用法：

  在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

  
      
  
       
  
        
  
         
  
        
        
  
         
  
          // 修改数据
         
        
       
  
        
  
         
  
        
        
  
         
  
          vm.msg = 
          'Hello'
         
        
       
  
        
  
         
  
        
        
  
         
  
          // DOM 还没有更新
         
        
       
  
        
  
         
  
        
        
  
         
  
          Vue.nextTick(
          function () {
         
        
       
  
        
  
         
  
        
        
  
         
    
          // DOM 更新了
         
        
       
  
        
  
         
  
        
        
  
         
  
          })
         
        
       
  
        
  
         
  
        
        
  
         
   
         
        
       
  
        
  
         
  
        
        
  
         
  
          // 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
         
        
       
  
        
  
         
  
        
        
  
         
  
          Vue.nextTick()
         
        
       
  
        
  
         
  
        
        
  
         
  
            .then(
          function () {
         
        
       
  
        
  
         
  
        
        
  
         
      
          // DOM 更新了
         
        
       
  
        
  
         
  
        
        
  
         
  
            })
         
        
      

  2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不原生支持 Promise (IE：你们都看我干嘛)，你得自己提供 polyfill。

  综上就是说：如果你想在组件更新之后执行操作的话，最好是把这些操作放在$nextTick方法里面执行，否则会出现怪异的组件属性丢失或者方法找不到的情况。