Vue Watch进阶：数据监控升级攻略

哈喽，各位亲们！今天就来聊聊咋样儿能让Vue的App快点儿动起来。猜猜看啥最重要？没错，就是我们都喜欢盯住看的那玩意——Watch。为啥？因为在开发时候，有些事儿总得瞅着数据变没变呐，这时候Watch就能派上用场了。不过，别忘了，当数据越来越多时，Watch可也会卡壳、运行慢下来。那这又该怎么办？赶紧跟我来瞧瞧怎么给Watch提升一下性能。

别急着往前冲，别急着解决问题，先搞清楚为什么不行嘞。看，数据一变，watch属性就能立即执行回调函数了。但如果要监控的数据越来越多呢?那就意味着每变一个变量就要触发所有回调函数运行一遍,这不是很繁琐吗？因为 Vue 的 watch 属性默认只关注对象或数组的引用变化，对于复杂对象里面的各种属性变化它可没兴趣。所以要想看到对象里的属性是怎么变异的，你可得稍微用心去挖掘和运用监听手法哟。

来聊聊Watch这个家伙。想要更深入地监控，那就得设置immediate和deep这两个选项，特别是把deep设置成真实，这样就能精确监测到Obj的每个层级变化了。一旦 Obj 的属性开始动起来，立刻触发handler 函数，再也不用手工去检查这些琐碎事儿了。对了，除了Watch，vue还有个超神奇的东西——就是那个计算属性！它就像个聪明能干的小秘书，按指令预先帮你存储好数据，等你需要时再进行一次计算。

watch: {
  obj: {
    immediate: true,
    deep: true,
    handler: function(val, oldVal) {
      // 监听到obj的变化后执行的操作
    }
  }
}

比起看守护属性，这个效果好多了哈。光从外面看框框是动还是没动静，啥也看不出来。比如像网页上人家打的字的总数这事儿，这个才能派上大用场。但是，如果用计算属性的话，跟踪框里字数变动岂不是更简单？

有时候，数据变化需要等一下再干其他事情，像是发送请求之类的，或者需要更换一个DOM元素。但如果我们就在观察者里完成这些动作，可能会让复活页面变得困难，因为DOM还没有及时更新。别担心，咱们有$nextTick这个电梯，等着数据真正变好后，再来做那些不用急着处理的事情就对了。

data: {
  inputText: '',
  textLength: 0
},
watch: {
  inputText: function(val) {
    this.textLength = val.length;
  }
}

如果想要搞定海量数据，那么不妨试一试用Vue里的watch。把它连起来用深度监听，利用其计算能力（快速计时）以及$nextTick（保证同步语句顺畅执行），绝对能让您的应用速度飙升！

data: {
  inputText: ''
},
computed: {
  textLength: function() {
    return this.inputText.length;
  }
}