vue如何解决代码需要在dom渲染之后执行问题
作者:快乐的小青蛙。
这篇文章主要介绍了vue如何解决代码需要在dom渲染之后执行问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue解决代码需要在dom渲染之后执行
当代码需要延迟到dom从新渲染之后执行时使用
- 组件的.$nextTick(回调函数)方法,会把回调推迟到下一个DOM更新周期之后执行。通俗的理解是:等组件DOM更新完成之后,在执行回调函数,从而能保证回调函数可以操作到最新的DOM元素
- 执行下列代码会报错,因为在执行上面代码时候,值变化后没有马上进行渲染页面(生命周期函数beforUpdata)所以拿不到ref的值
- 为什么不能写到updata中(因为点击后会执行一次获取焦点,当输入框失去焦点的时候,又要获取一次焦点,此时输入框已经隐藏) 此处不能使用 this.$refs.iptref.focus();
vue(数据改变,DOM不渲染问题)
1、组件内部
属性值地址空间内引用地址改变,DOM不能渲染。
问题举例:
this.items = [[],[],[],[]]
在items 中,修改任意一项数组中的值,DOM是不会更新的,
解决方案:
this.items = [...this.items]
通过解构赋值,重新给items赋值。
2、组件之间传值
父组件传data改变,子组件未更新。
子组件中在mounted中对父组件传的值,进行了判断等相关处理,通过改变子组件自身定义的状态实现效果。
此时,父组件值更新,子组件不重新渲染,是因为,父组件值改变子组件不会走mounted的生命周期。
处理方案:
使用watch监听父组件传的值,当值改变的时候,进行对应操作。
推荐使用:
子组件中直接使用父组件传的值,如需类型转换或者简单判断,直接通过三目运算符判断使用,就省去了对父组件传值的监听步骤。
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。