vue.js使用过程中的一些笔记

本文详细解析了Vue.js中的生命周期钩子,包括watch列表中immediate的执行时机、beforeUpdate和updated钩子的使用限制,以及组件加载和数据更新时render函数的执行。同时,介绍了组件间通信的最佳实践,避免直接修改data值,推荐使用props和$emit事件,以及在复杂场景下利用Vuex进行状态管理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

watch列表中immediatetrue时,监听回调将在beforeCreatecreated生命周期之间执行。如需在此监听回调中访问子组件或DOM元素,请使用this.$nextTick()

慎用beforeUpdateupdated生命周期钩子函数,尤其不能在此类生命周期函数中对data中的数据进行更改,否则极易导致死循环和浏览器崩溃(不断触发beforeUpdateupdated生命周期,并一直往microtask队列中放入任务)。如果必须在此类生命周期中对data中的数据进行修改,可以考虑在setTimeout()中进行相关操作(相关操作将被放到macrotask中,一般不会导致浏览器完全卡死)。如果数据被渲染到DOM中且变动频繁,则beforeUpdateupdated生命周期钩子函数也会被频繁调用,易造成性能下降问题。

组件刚加载时,render函数在beforeMountmounted之间执行,之后每次在数据发生更新时都会被执行,在beforeUpdateupdated之间执行。

SSR模式下,服务端在执行完beforeCreatecreated生命周期钩子函数后会直接执行render函数生成页面的内容。

当data中被改变的变量在模板中被用到,或在渲染函数中被访问到时,才会触发组件的重新渲染,以及beforeUpdateupdate生命周期。

关于组件间传值:

  • 不推荐直接修改父组件或子组件data的值,容易导致代码难以维护。
  • 一般可以通过props从父组件向子组件传数据,通过$emit事件的方式从子组件向父组件传值。这里有更多的Prop和自定义事件的用法,为自己的组件实现v-model的功能和.sync修饰符的功能,可以增强代码的可维护性。
  • 当某些数据需要在多个非父子组件中读取/更改时,可考虑将此类数据放入vuex中。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值