【Vue】vue.js 如何在页面渲染完后去操作dom，而且只执行一次？

我想在页面渲染完执行我的代码,去操作dom。因为我把操作dom的写在加载数据的方法里面，发现是选不到dom的，应该是这个时候js还没执行完，页面还没渲染好。

vue的created是实例创建完执行一次，但是这个时候去操作dom是选不到的。
还有个update，这个倒是可以选到dom,但是这个每次都被执行啊，我只想在执行一次。

对于这种需求，有没有什么好的解决方法？

回答

在接口请求成功的回调里使用

this.$nextTick(() =>{
  // 在这里面去获取DOM
})。

在mounted生命周期，组件挂载成功，但还未渲染，自然获取不到相关的DOM节点。看你资料好像不是前端，举个更简单的例子，你在html中，把 console.log(document.querySelector('body'))写在body标签前面，代码执行时机先于页面渲染，结果就是undefined。
不推荐用updated, beforeUpdate生命周期，这2个生命周期只会在数据发生变化时才触发。如果你请求接口的数据是放在created生命周期（我推荐放在created里面去发起请求），初次进入页面是不会触发updated, beforeUpdate里面的代码。
如果你非要要updated，并且希望第一次进入页面即可获取到DOM节点，那么请在mounted生命周期请求接口数据，而不是created了

在你请求数据接口之后，给数据赋值完成，在后面写

this.$nextTick(function(){
})

同时注意下this指向

DOM选在加载完毕是在mounted这个生命周期，在这里面是可以执行一些事件的；
在Vue中要想就执行一次点击事件，可以使用事件修饰符.once,非常好用。例如：<p v-on:click.once="doThis">只执行一次</p>，当然绑定事件可以简写成@符号的。 激凸可参考官方文档： https://vuefe.cn/v2/guide/eve...

mounted: function () {
  this.$nextTick(function () {
  })
}

看下vue的生命周期，直接用mounted就好了

结合大家的回答，我又去看了下文档，this.$nextTick是可以的，但是一定要放在数据加载完后。要能选到dom,并且独立于方法之外，还是用updated,beforeUpdate。文档上也是这么说的。
如果用mounted，我的dom选不到，从文档上的意思是实例创建完调用它，但是选不到dom，不知道是不是我代码的问题。

使用directive自定义指令

我记得vue不支持直接操作dom。你可以试着给dom节点加个ref，等到mounted之后就行js事件

this.$nextTick(function(){
    // ...
})

dom再配合 v-once 只渲染一次

实在不行的话，可以在mounted() {} 里面初始化，然后 调用this.xxxx,也可以使用jquery操作dom，我的vue项目用vue解决不了，就用jquery来解决。

你要在获取数据之后用this.$nextTick(()=>{ //todo }) 这样就能拿到dom元素了。
【Vue】vue.js 如何在页面渲染完后去操作dom，而且只执行一次？

this.$nextTick(()=>{})放到请求的结束的回调里面

以上是 【Vue】vue.js 如何在页面渲染完后去操作dom，而且只执行一次？ 的全部内容， 来源链接： utcz.com/a/72622.html

回到顶部