vue监听json数据变化

普通数据

export default {
  data() {
    return {
      descLength: 0
    }
  },
  watch: {
    'descLength': function(newValue) {
      console.log(newValue)
    }
  }
}

json数据的某个元素

export default {
  data() {
    return {
      activeArticle: {
        title: ''
      }
    }
  },
  watch: {
   'activeArticle.title': function(newValue) { // 监听title的变化
      console.log(newValue)
    }
  }
}

整个json数据

export default {
  data() {
    return {
      activeArticle: {}
    }
  },
  watch: {
   activeArticle: {
      handler(newValue, oldValue) { // oldValue是activeArticle变化之前的值,newValue是activeArticle变化之后的值
        console.log(newValue)
      },
      deep: true
    }
  }
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
监听 SessionStorage 变化,您可以使用 Vue 的 `$watch` 函数来监视 SessionStorage。具体方法如下: 1. 在 Vue 组件中,使用 `$watch` 函数来监听 SessionStorage 的变化。例如: ```javascript export default { created() { window.addEventListener('storage', this.onStorageChange) }, methods: { onStorageChange(event) { if (event.key === 'myKey') { // 处理 SessionStorage 变化的逻辑 } } } } ``` 在上面的代码中,我们使用 `window.addEventListener('storage', this.onStorageChange)` 来监听 SessionStorage 的变化,并在 `onStorageChange` 方法中处理变化的逻辑。 2. 如果您想在多个组件中共享相同的 SessionStorage,可以将 SessionStorage 封装在一个单独的模块中,然后在多个组件中使用该模块。例如: ```javascript const storage = { fetch(key) { return JSON.parse(window.sessionStorage.getItem(key)) }, save(key, data) { window.sessionStorage.setItem(key, JSON.stringify(data)) } } export default storage ``` 在上面的代码中,我们定义了一个 `storage` 对象,它包含了 `fetch` 和 `save` 两个方法来读取和保存 SessionStorage。然后我们将 `storage` 对象导出,以便在其他组件中使用。 3. 在其他组件中使用 `storage` 模块。例如: ```javascript import storage from './storage' export default { created() { this.$watch(() => storage.fetch('myKey'), (newValue, oldValue) => { // 处理 SessionStorage 变化的逻辑 }) } } ``` 在上面的代码中,我们使用 `this.$watch` 函数来监听 `storage.fetch('myKey')` 的变化,然后在回调函数中处理变化的逻辑。这样,在任何一个组件中修改了 SessionStorage,都会触发所有组件中 `$watch` 函数的回调。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值