vue实现监控功能

Vue 实现监控功能的方法

使用 Vue 的 watch 选项

在 Vue 组件中，可以通过 watch 选项来监控数据的变化。当被监控的数据发生变化时，会触发相应的回调函数。

export default {
  data() {
    return {
      message: 'Hello Vue'
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`Message changed from ${oldVal} to ${newVal}`)
    }
  }
}

使用 $watch 方法

Vue 实例提供了 $watch 方法，可以在组件内动态添加监控。

export default {
  data() {
    return {
      counter: 0
    }
  },
  created() {
    this.$watch('counter', (newVal, oldVal) => {
      console.log(`Counter changed from ${oldVal} to ${newVal}`)
    })
  }
}

监控对象属性

如果需要监控对象的某个属性，可以使用深度监控（deep watch）。

export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 25
      }
    }
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        console.log('User object changed')
      },
      deep: true
    }
  }
}

监控计算属性

计算属性本身是响应式的，但可以通过 watch 来监控其变化。

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  },
  watch: {
    fullName(newVal, oldVal) {
      console.log(`Full name changed from ${oldVal} to ${newVal}`)
    }
  }
}

使用 immediate 选项

如果需要立即执行监控回调，可以使用 immediate 选项。

export default {
  data() {
    return {
      isLoaded: false
    }
  },
  watch: {
    isLoaded: {
      handler(newVal) {
        console.log(`isLoaded is now ${newVal}`)
      },
      immediate: true
    }
  }
}

监控路由变化

在 Vue Router 中，可以通过 watch 来监控路由变化。

export default {
  watch: {
    '$route'(to, from) {
      console.log(`Route changed from ${from.path} to ${to.path}`)
    }
  }
}

使用 Vue 3 的 watch 和 watchEffect

在 Vue 3 中，可以使用 watch 和 watchEffect 来监控响应式数据。

import { ref, watch, watchEffect } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(count, (newVal, oldVal) => {
      console.log(`Count changed from ${oldVal} to ${newVal}`)
    })

    watchEffect(() => {
      console.log(`Count is now ${count.value}`)
    })

    return { count }
  }
}

监控多个数据源

在 Vue 3 中，可以同时监控多个数据源。

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const name = ref('John')

    watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
      console.log(`Count: ${oldCount} -> ${newCount}, Name: ${oldName} -> ${newName}`)
    })

    return { count, name }
  }
}

使用第三方库

如果需要更复杂的监控功能，可以考虑使用第三方库如 vue-watch 或 vue-reactive。

import VueWatch from 'vue-watch'

Vue.use(VueWatch)

通过以上方法，可以在 Vue 中实现灵活的数据监控功能，满足不同场景的需求。