vue 页面初始化 数据处理过程

1 mounted 是初始化页面(浏览器刷新也是初始化页面),computed是更新页面数据

浏览器刷新会重新初始化页面。当我们使用 Vue.js 时，也会进行重新初始化，
重新创建 Vue.js 实例，并将原有的数据和方法重新加载到内存中。
这也是为什么在开发 Vue.js 应用时，刷新页面可以清除掉一些错误状态的原因。
但是，如果使用了 keep-alive 等特殊的组件，不会重新创建 Vue.js 实例，
而是缓存之前的状态

2 mounted在使用特定的函数时 可以实时监听渲染

mounted() 只是 Vue 组件生命周期中的一个钩子函数，
它在组件挂载后只会执行一次。在某些情况下，
我们需要实时监听某些元素的变化并进行相应的处理，这时候需要使用其他的技术手段，
例如使用 ResizeObserver API 监听元素大小变化、使用 MutationObserver API 监听DOM变化等。
通过这些手段实现实时的渲染更新。

mounted() {
    // 创建 ResizeObserver 实例
    const observer = new ResizeObserver(this.handleResize);
    // 监听 container 元素的变化
    observer.observe(this.$refs.container);
    // 保存实例，以便在组件销毁时进行断开监听的处理
    this.observer = observer;
  },
  beforeDestroy() {
    // 断开监听
    this.observer.disconnect();
  },
  methods: {
    handleResize(entries) {
      const container = this.$refs.container;
      const headerContainer = this.$refs.headerContainer.$el;
      // 更新 headerStyle.width 的值
      this.headerStyle.width = container.offsetWidth * 0.9 + 'px';
    },

3  页面第一次加载 数据处理过程是

data中声明定义,然后computed中处理一次数据, 最后mounted加载computed中的数据,以及没有被computed处理过的data中return的数据

1.在 data 中声明并定义数据。

2.在 computed 中对数据进行处理。

3.在 mounted 钩子函数中访问 computed 中已处理的数据，并将其渲染到页面上。

4.对于没有被 computed 处理的数据，直接在 data 中返回即可。

一般情况下，组件中的数据处理过程遵循这个流程。当数据发生变化时，computed 会自动更新，然后触发页面重新渲染。

4 compued中 数据只要变动, 页面就会自动更改数据,不用mounted来实现重新渲染页面

计算属性中的数据会自动响应页面变化，并更新数据。
这是因为当计算属性中用到的数据发生变化时，计算属性就会重新计算，
触发视图更新。因此，计算属性可以用来帮助我们响应数据的变化，
并将新的数据更新到页面上。

5 keep-alive 可以保存我之前获取的后端数据,在浏览器刷新后 不用再重复请求数据

keep-alive 组件可以缓存组件的状态，当组件被激活时，
可以从缓存中读取数据和状态，从而避免了每次刷新页面都需要重新获取数据的问题。
当组件被缓存时，组件的 created 和 mounted 钩子函数不会被重新调用，
但是 activated 和 deactivated 钩子函数会被调用。
所以你可以在 activated 钩子函数中进行数据的初始化和更新操作。
需要注意的是，缓存过多的组件会造成内存占用过高的问题，
所以需要根据情况进行合理的缓存配置。

6 ps

在 Vue.js 中，使用 Vuex 管理全局状态，
将后端获取的数据保存到 Vuex 的 state 中，可以让组件之间方便地共享和使用这些数据。
同时，由于 Vuex 中的 state 是响应式的，
因此当 state 中的数据发生变化时，组件中使用这些数据的部分也会相应地更新。

当然，在局部组件的数据管理中，使用 keep-alive 缓存组件的状态，
可以避免在组件销毁后重新获取数据的问题，
提升用户体验。而 localStorage 是一种在浏览器端保存数据的机制，
可以在一定程度上减轻服务器压力，提升页面加载速度。
一般而言，使用 Vuex 和 keep-alive 更多地是用于管理组件的状态和数据，
而使用 localStorage 则更多地是用于本地数据的存储和读取。

keep-alive 是 Vue.js 内置的一个组件，用于将不活动的组件保留在内存中。
它可以缓存组件的状态，避免在组件切换时重复地创建和销毁。
但是，如果页面刷新或者重新打开，keep-alive 缓存的状态和数据会被清除，
因此需要重新获取数据。

localStorage 则是浏览器提供的一种本地数据存储机制。它可以存储一些数据在用户的电脑本地，
即使用户刷新页面或者关闭浏览器后再次打开，存储的数据也不会丢失。
因此，使用 localStorage 可以实现对一些本地数据的持久化存储，
这个过程不需要重新请求数据。

因此，keep-alive 和 localStorage 的主要区别在于作用和使用场景不同。
keep-alive 主要用于缓存组件的状态，提高页面渲染性能，并且是在内存中进行缓存的，
与浏览器有关；
而 localStorage 主要用于实现对本地数据的持久化存储，
用于存储一些用户数据、设置等，与浏览器相关，它的存储数据是在本地磁盘上面

6

需要注意的是，localStorage 存储的数据量有限制，
最大可存储的数据大小为 5MB，因此需要根据实际情况合理地使用 localStorage。
另外，由于 localStorage 中存储的数据是以字符串的形式存储的，
所以需要在存储和读取数据时进行相应的类型转换。