1. 场景描述

在Nuxt.js中，用axios从服务端获取数据data，为了优化本地访问速度，将data存储在locaStorage中。这样，当用户刷新页面是，优先加载本地数据，超过一定时限，删除本地data，再次从服务端获取。
实现代码如下：

  mounted () {
    // 加载函数
    this.readOrCreateLocal()
  },
  methods: {
// 请求函数
    queryAll () {
      const result = axios.get(
        'http://127.0.0.1/api/v1/queryAll'
      )
      result.then((res) => {
        console.log('Query From Server...')
        // 请求到的数据赋值
        this.hxes = res.data.message
        // 同时将请求到的数据存入localStorage
        const data = JSON.stringify(res.data.message)
        localStorage.setItem('hxes', data)
        // 同时写入时间戳
        const time = new Date().getTime()
        localStorage.setItem('hxes_time', time)
        // 回到加载函数
        this.readOrCreateLocal()
      })
    },
// 加载函数
    readOrCreateLocal () {
      const data = localStorage.getItem('hxes')
      const time = localStorage.getItem('hxes_time')
       // 如果localStorage有数据，且有时间戳，解析
      if (data && time) {
        // 计算数据的存在时间
        const period = new Date().getTime() - time
        // 如果没超过一定时间
        if (period < 5000) {
          // 正常读取
          console.log('Read From Local...')
          this.hxes = JSON.parse(data)
          // 结束
          return
          // 如果数据存在时间过长
        } else {
          // 删除本地数据，程序继续
          localStorage.removeItem('hxes')
          localStorage.removeItem('hxes_time')
          console.log('Delete Expired Data...')
        }
      }
      // 如果没有localStorage数据，运行请求函数
      this.queryAll()
    }
  }

2. 出现问题

代码没什么问题，可以正常运行。
但是当从本地读取数据时，Condole报错：

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

大致的意思是说服务端与客户端的虚拟DOM树不匹配，不是很明白其中的技术细节，但是有个大概的概念，就是Nuxt.js是服务端和应用端分离的。
先是仔细比对了存进去和取出来的数据，没有发现问题。因此可以推断是Nuxt框架的问题，再经过一番艰苦的搜索，终于找到解决方案：

<template>
  <div>
    <sidebar />
    <client-only placeholder="Loading...">
      <!-- comments 组件只会在客户端被渲染 -->
      <comments />
    </client-only>
  </div>
</template>

加上<client-only>组件， 此组件用于仅在客户端渲染其他组件.
原理不懂，但是实践后确实解决了问题，不再报错。
参看这里 nuxtjs.cn