vue的面试题持续更新中

如何解决vuex页面刷新数据丢失问题？

1. 使用浏览器的本地存储
   localStorage：数据会永久存储在浏览器中，除非被主动删除。
   sessionStorage：数据存储在当前会话的tab页中，关闭当前tab页或浏览器窗口后数据会消失。
   cookie：数据根据设置的有效时间存储，但通常不推荐用于存储大量数据，因为存在大小限制且不易读取。
   解决方案：
   在Vuex的mutation或action中，监听数据的变化，将数据同步到浏览器的本地存储中。
   页面刷新时，从本地存储中读取数据并恢复到Vuex中。
2. 使用Vuex持久化插件
   vuex-persistedstate：这是一个Vuex插件，可以将Vuex的状态数据持久化到浏览器的localStorage或sessionStorage中。
   解决方案：
   安装并引入vuex-persistedstate插件。
   在创建Vuex store时，将插件添加到plugins数组中，并配置存储选项（如使用localStorage还是sessionStorage）。
3. 使用后端存储
   如果数据量较大或需要多个设备之间共享数据，可以考虑将数据存储到后端服务器中。
   解决方案：
   在Vuex的action中，使用Ajax、Fetch API等技术将数据发送到后端服务器进行存储。
   页面刷新时，从后端服务器重新获取数据并恢复到Vuex中。
   注意事项:
   对于敏感信息（如用户登录信息），不应直接存储在浏览器的本地存储中，而应采用更安全的方式来保存。
   使用本地存储或插件时，要注意防止数据的被篡改或泄露等安全问题。
   根据应用的具体需求和场景，选择最适合的解决方案。例如，对于小型应用或数据量不大的情况，使用浏览器的本地存储可能是一个简单有效的选择；而对于大型应用或需要复杂数据管理的情况，使用后端存储可能更为合适。

Vue中computed和watch的区别

this.$nextTick的使用

就是重新渲染组件后调用的回调函数，功能等同于updated（）钩子函数

this.$set的使用

就是可以新增一个对象属性使其有get 和 set方法，这样才会触发重新更新组件视图，如果是this.info.age=12;这样添加的话，是不会更新组件视图，也不会有get和set方法

this.info是一个对象
this.$set(this.info, "age", 12)
或者
Vue.set(this.info, "age", 12)