Vue·动态可响应对象

作者 : jamin 本文共742个字,预计阅读时间需要2分钟 发布时间: 2020-10-18 共1119人阅读

动态可响应对象

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

本站所提供的部分资源来自于网络,版权争议与本站无关,版权归原创者所有!仅限用于学习和研究目的,不得将上述内容资源用于商业或者非法用途,否则,一切后果请用户自负。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源。如果上述内容资对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。本站不保证所提供下载的资源的准确性、安全性和完整性,源码仅供下载学习之用!如用于商业或者非法用途,与本站无关,一切后果请用户自负!本站也不承担用户因使用这些下载资源对自己和他人造成任何形式的损失或伤害。如有侵权、不妥之处,请联系站长以便删除!
金点网络 » Vue·动态可响应对象

常见问题FAQ

免费下载或者VIP会员专享资源能否直接商用?
本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
是否提供免费更新服务?
持续更新,永久免费
是否经过安全检测?
安全无毒,放心食用

提供最优质的资源集合

立即加入 友好社区
×