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

29 篇文章 0 订阅
文章讨论了Vue.js组件的生命周期,特别是mounted、computed和keep-alive的作用。mounted是初始化页面,computed处理数据更新,而keep-alive用于组件状态缓存。还提到了Vuex在全局状态管理中的应用以及localStorage用于持久化数据存储。
摘要由CSDN通过智能技术生成
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 中存储的数据是以字符串的形式存储的,
所以需要在存储和读取数据时进行相应的类型转换。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值