watch侦听器的进阶使用

在vue2项目中, 通常情况, 我们会使用watch和计算属性computed监听data中的数据变化, 如例

 // computed
 <template>
    <div> 
          <p>原始数据：{{ rawData }}</p>
          <p>计算属性：{{ computedValue }}</p> 
    </div>
   </template> 
   
   <script>
   export default { 
   data() { 
     return { rawData: 5, }; 
    },
   computed: { 
      computedValue() { // 计算属性会根据 rawData 的值计算出新的值
         return this.rawData * 2; 
        },
      },
   };
   </script>
  

// watch
   <template> 
         <div> 
         <p>监视的数据：{{ watchedData }}</p>
         </div> 
  </template> 
  
   <script>
   export default { 
       data() { 
            return {
            watchedData: 0, 
            };
         }, 
         watch: { 
             watchedData(newValue, oldValue) { // 监听 watchedData 的变化，并执行相应的操作                       console.log(`监视的数据发生变化，新值为：${newValue}, 旧值为：${oldValue}`); },
            }, 
        }; 
   </script>

以上是基础用法, 同时, 他们也可以自由监听props中由父组件传递的值, 但是, watch有一个更强大的功能, 它可以监听vuex中的数据变化, 在复杂的场景应用中, 可以替代vuex自带的getters来使用, 如例

   watch: {
      //  watch侦听vuex的Tabs数据的变化
      '$store.state.tabs.index'(newValue) {
          console.log(newValue);
          this.$store.commit('tabs/getPath')
          this.defaultValue = this.$store.state.tabs?.path // 设置每次默认选中
      }
    },

在这里, 我使用watch 去监听 vueX中的一个模块下的数据的变化, 如此, 当多个组件或者页面中, 使用或者依赖相同的数据时, 可以通过watch进行更加灵活的操作