vue.js - vue怎么确认在dom生成后,才执行js代码

问题描述

问 题

我用jquery,写的一段代码,放在了this.$nextTick这个钩子函数里.可以肯定的是这段代码肯定执行了(我打log了),但是代码中点击事件没有添加上.但是之后刷新下页面,点击事件就可以用了,请问这是怎么回事呢?

mounted: function () {
    this.$nextTick(function () {
        // 代码保证 this.$el 在 document 中
        console.log('1'); // 这个会执行
        $('.sidebar-nav-sub-title').on('click', function() {
            console.log('2'); // 这个必须刷新下才能执行
            $(this).siblings('.sidebar-nav-sub').slideToggle(80)
                .end()
                .find('.sidebar-nav-sub-ico')
                .toggleClass('sidebar-nav-sub-ico-rotate');
        });
    });
}

解决方案

先解决你的问题：

你只需要将代码放在mounted的生命周期里。这个周期是在DOM生成之后执行的。这里面你能绑定的你所需要的DOM。

mounted() {
    var div = $('div')
}

在说下nextTick：

我觉得这是对nextTick 的理解有一定偏差，官方给的定义是：

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新……

也就是说，nextTick的应用场景是在DOM生成之后，当你改变一个数据后，想对这个数据所对应的DOM进行操作，这个时候你就需要用到nextTick。

这里如果你有点迷惑，那么建议你了解下vue异步队列的概念。大致是这个意思，就是当你改变的一个数据之后，vue检测到这个数据的变化，回去更新相应的视图，但是这个更新视图的操作需要排队，并不是马上就更新，即它是异步的。也就意味着，这个更新操作和你当前执行的函数（你更改数据的这个函数）并不在同一个栈里面，它可能会等你执行完当前函数里面的语句后，才去执行DOM更新。

Vue.component('example', {
  template: '<span>{{ message }}</span>',
  data: function () {
    return {
      message: '没有更新'
    }
  },
  methods: {
    updateMessage: function () {
      this.message = '更新完成'
      // 这个时候已经执行了数据改变的操作，可能会误以为此时DOM中的textContent已经变成'更新完成'，其实并没有。正如上文所说的这个操作是异步的，它还在排队。
      console.log(this.$el.textContent) 
      this.$nextTick(function () {
      // 这里就是nextTick的用处，用一个异步回调，他会等到DOM更新后，再去执行相应的DOM操作。
        console.log(this.$el.textContent) // => '更新完成'
      })
    }
  }
})

补充

如果你能大概看得明白我上面一段的理解，相应你也明白了vue的思想是数据驱动视图，这也是现在前端的趋势之一，一般情况下不需要我们对dom进行操作。所以能放弃jquery就放弃了。等你适应的这种数据驱动视图的模式，你就会觉得很爽，倍感丝滑
~

这篇关于vue.js - vue怎么确认在dom生成后,才执行js代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！