Vue——使用 watch 注意项

基本问题

• watch 是侦听器，可以对某个数据进行侦听，并作出响应动作

• 问题：简单设置的 watch，其实在页面第一次加载的时候是不会起作用的，只有再次改变监听的值才会触发 watch

• 下面是对路由的监听，页面第一次加载的时候我就需要对路由进行响应

  export default {
    watch: {
      $route: {
        handler: function(val) {
          if (val.path === "/personal") {
            this.isSel = "/personal/pretopic";
            this.$router.push("/personal/pretopic");
            return;
          }
          this.isSel = val.path;
        },
        immediate: true
      }
    }
  }
  

  vm.$watch('a', callback, {
    immediate: true
  })
  // 立即以 `a` 的当前值触发回调
  

• 官方文档的中关于 watch 的关键配置 immediate，其字面意思就是对当前值立刻做出反应

• 还需要注意的是 calback，在组件中的形式是以 handler来对应回调函数

• 除了 immediate，这个关键配置，还有 deep，表示对深层数据进行侦听，一般是一个复杂对象

• https://cn.vuejs.org/v2/api/#vm-watch

监听 store

• 监听特定属性

  let App = new Vue({
      //...
      store,
      watch: {
          '$store.state.myState': function (newVal) {
              console.log(newVal);
              store.dispatch('handleMyStateChange');
          }
      },
      //...
  });
  

• https://cn.vuejs.org/v2/guide/migration-vuex.html#Store-的事件触发器-移除

• https://forum.vuejs.org/t/correct-way-to-use-store-watch-in-vuex/1800/3

• https://stackoverflow.com/questions/43270159/vuejs-2-how-to-watch-store-values-from-vuex