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

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中。
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值