05 动态可响应对象

Vue.observable(object) 让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器，用于简单的场景

// 在 main.js 设置
Vue.prototype.$isMobile = Vue.observable({ value: document.body.clientWidth < 750 })

// App.vue
export default {
  name: 'App',
  data() {
    return {
      lastResizeTimer: '',
      lastResizeAt: new Date(),
    }
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      const now = new Date()
      if (now - this.lastResizeAt <= 150) return
      this.lastResizeAt = now
      this.$isMobile.value = document.body.clientWidth < 750

      clearTimeout(this.lastResizeTimer)
      this.lastResizeTimer = setTimeout(() => {
        this.$isMobile.value = document.body.clientWidth < 750
      }, 200)
    },
  },
}

参考文章： Vue-observable