vue如何解决代码需要在dom渲染之后执行问题

作者：

在

文章目录

目录

当代码需要延迟到dom从新渲染之后执行时使用组件的.$nextTick（回调函数）方法，会把回调推迟到下一个DOM更新周期之后执行。通俗的理解是：等组件DOM更新完成之后，在执行回调函数，从而能保证回调函数可以操作到最新的DOM元素执行下列代码会报错，因为在执行上面代码时候，值变化后没有马上进行渲染页面（生命周期函数beforUpdata）所以拿不到ref的值为什么不能写到updata中（因为点击后会执行一次获取焦点，当输入框失去焦点的时候，又要获取一次焦点，此时输入框已经隐藏）此处不能使用 this.$refs.iptref.focus();

属性值地址空间内引用地址改变，DOM不能渲染。问题举例： this.items = [[],[],[],[]] 在items 中，修改任意一项数组中的值，DOM是不会更新的，解决方案： this.items = […this.items] 通过解构赋值，重新给items赋值。
父组件传data改变，子组件未更新。子组件中在mounted中对父组件传的值，进行了判断等相关处理，通过改变子组件自身定义的状态实现效果。此时，父组件值更新，子组件不重新渲染，是因为，父组件值改变子组件不会走mounted的生命周期。处理方案：使用watch监听父组件传的值，当值改变的时候，进行对应操作。推荐使用：子组件中直接使用父组件传的值，如需类型转换或者简单判断，直接通过三目运算符判断使用，就省去了对父组件传值的监听步骤。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持风君子博客。您可能感兴趣的文章: Vue实现插槽下渲染dom字符串的使用 vue this.$refs.xxx获取dom注意事项 v-if v-for渲染的dom不能直接使用详解Vue.js3.0 组件是如何渲染为DOM的解决vue页面渲染但dom没渲染的操作 Vue使用虚拟dom进行渲染view的方法 Vue监听数据渲染DOM完以后执行某个函数详解 vue2.0的虚拟DOM渲染思路分析 vue中实现先请求数据再渲染dom分享

目录

vue解决代码需要在dom渲染之后执行
vue（数据改变，DOM不渲染问题）

1、组件内部
2、组件之间传值

总结

当代码需要延迟到dom从新渲染之后执行时使用

组件的.$nextTick（回调函数）方法，会把回调推迟到下一个DOM更新周期之后执行。通俗的理解是：等组件DOM更新完成之后，在执行回调函数，从而能保证回调函数可以操作到最新的DOM元素

执行下列代码会报错，因为在执行上面代码时候，值变化后没有马上进行渲染页面（生命周期函数beforUpdata）所以拿不到ref的值

为什么不能写到updata中（因为点击后会执行一次获取焦点，当输入框失去焦点的时候，又要获取一次焦点，此时输入框已经隐藏）此处不能使用 this.$refs.iptref.focus();

属性值地址空间内引用地址改变，DOM不能渲染。

问题举例：

this.items = [[],[],[],[]]

在items 中，修改任意一项数组中的值，DOM是不会更新的，

解决方案：

this.items = [...this.items]

通过解构赋值，重新给items赋值。

父组件传data改变，子组件未更新。

子组件中在mounted中对父组件传的值，进行了判断等相关处理，通过改变子组件自身定义的状态实现效果。

此时，父组件值更新，子组件不重新渲染，是因为，父组件值改变子组件不会走mounted的生命周期。

处理方案：

使用watch监听父组件传的值，当值改变的时候，进行对应操作。

推荐使用：

子组件中直接使用父组件传的值，如需类型转换或者简单判断，直接通过三目运算符判断使用，就省去了对父组件传值的监听步骤。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持风君子博客。

您可能感兴趣的文章:

Vue实现插槽下渲染dom字符串的使用

vue this.$refs.xxx获取dom注意事项 v-if v-for渲染的dom不能直接使用

详解Vue.js3.0 组件是如何渲染为DOM的

解决vue页面渲染但dom没渲染的操作

Vue使用虚拟dom进行渲染view的方法

Vue监听数据渲染DOM完以后执行某个函数详解

vue2.0的虚拟DOM渲染思路分析

vue中实现先请求数据再渲染dom分享

vue dom渲染 vue在dom渲染后执行 vue渲染dom

更多文章