Question

为什么在下面的示例中需要nextTick才能计算元素高度？据我所知，nextTick用于在修改反应性数据之后等待DOM更新，以下情况并非如此：

Vue.directive('test', {
    bind: function(el) {
    console.log($(el).css('height'))
    Vue.nextTick(() => {
        console.log($(el).css('height'))
    })
  }
});

var demo = new Vue({
    el: '#demo'
})

<div id="demo">
  <div v-test>
    lorem
    lorem
  </div>
</div>

http://jsfiddle.net/LPfpS/463/

Answer 1

您使用了错误的钩子。

挂钩函数指令定义对象可以提供多个挂钩   功能（所有可选）：



bind：仅在指令首次绑定到   元件。在这里您可以进行一次性设置。



inserted：在将绑定元素插入其元素时调用   父节点（仅保证父节点存在，不保证   一定是文档中的。）

Vue.directive('test', {
    inserted: function(el) {
    console.log($(el).css('height'))

  }
});

var demo = new Vue({
    el: '#demo'
})

请参见Fiddle

计算指令中的元素高度

1 个答案: