vue如何解决代码需要在dom渲染之后执行问题
更新时间：2024年03月06日 15:06:51 作者：快乐的小青蛙。
这篇文章主要介绍了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监听父组件传的值，当值改变的时候，进行对应操作。
推荐使用：
子组件中直接使用父组件传的值，如需类型转换或者简单判断，直接通过三目运算符判断使用，就省去了对父组件传值的监听步骤。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在 Web 应用程序中,有时需要为某些内容提供全屏显示的功能,本文将介绍如何使用 Vue.js 3 的 Composition API 创建一个全屏功能的工具类,希望对大家有所帮助2024-03-03
这篇文章主要为大家详细介绍了vue Echarts实现仪表盘案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最近做时速云项目部署,需要将前端项目打成镜像文件,下面这篇文章主要给大家介绍了关于Vue项目打包成Docker镜像包的简单步骤,需要的朋友可以参考下2023-10-10
elementUI动态表单 + el-select 按要求禁用问题
这篇文章主要介绍了elementUI动态表单 + el-select 按要求禁用问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最近遇到这样的需求点击某一个节点，弹窗，直接定位到点击的节点，高亮并显示数据，下面小编给大家带来了vue table直接定位到指定元素的操作代码,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了Vue中qs插件的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-02-02
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
下面小编就为大家带来一篇Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
hooks可以通过特定的函数将逻辑 "钩入" 组件中,使得开发者能够更灵活地构建和管理组件的功能从而提高代码的可读性以及可维护性等,本篇文章将介绍hooks如何在vue3中使用以及它的一些实际使用例子,让大家能更好的了解和使用hooks,需要的朋友可以参考下2023-09-09
element组件中自定义组件的样式不生效问题(vue scoped scss无效)
这篇文章主要介绍了解决element组件中自定义组件的样式不生效问题(vue scoped scss无效)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
本文主要介绍了vue el-pagination分页查询封装的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-06-06
最新评论