用vuejs开发项目中遇到的一些小坑（1）

今天开发的项目本来造物到了要收尾的阶段，由于产品提了个小需求，需要把登录和注册中的手机号码输入框限制为只能输入数字，然后就是自己挖坑填坑的阶段了。。。。

自然的就是想到在watch中监听一下变量，然后正则匹配一下，在replace一下就可以了，然而试了各种正则还是不行，后来还是靠度娘才解决问题，  
  
  原来 Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。  
  $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。  
    
    实现如下:  
    watch: {
      phoneNum(n, o) {
        this.$nextTick(() => {
          this.phoneNum = n.replace(/[^\d]/g,'');
        })
      }
    }  
复制代码

虽然是小东西，还是浪费了时间，菜鸟慢慢成长吧~

转载于:https://juejin.im/post/5b2caa97e51d45587b480ad4