javascript - 如何检测vue组件何时通过属性更新功能？

Question

我需要在 vue 中为每个组件显示一个微调器(这是要求)。

为此，我考虑在组件 HTML 中执行 v-if="loading" 操作。

我的问题是如何检测组件何时加载完成？ (意思是在 DOM 渲染之后，数据绑定(bind)被解析为 DOM 元素)

根据Vue lifecycle当 update 函数被触发时，渲染就完成了。

因此，我需要为每个组件实现 update 函数，将 loading 更改为 false。有简单的方法吗？例如，有一个地方可以编写 update 函数？我可以在不实现extends的情况下做到这一点吗？有什么复杂的方法可以做到这一点吗？

例如，我需要的是 Vue 实例中可用的 this.loading 。

Answer 1

当然可以。 Vue mixins前来救援。

Mixins are a flexible way to distribute reusable functionalities forVue components. A mixin object can contain any component options. Whena component uses a mixin, all options in the mixin will be “mixed”into the component’s own options.

注意您应该使用 mounted如果你想跟踪组件何时插入到 DOM 中，则使用钩子(Hook)。

Called after the instance has been mounted, where el is replaced bythe newly created vm.$el. If the root instance is mounted to anin-document element, vm.$el will also be in-document when mounted iscalled.

mixin.js:

export default {
  data() {
    return {
      loading: true
    }
  },
  mounted() {
    console.log('I have been mounted')
    this.loading = false
  }
}

然后全局注册该 mixin，这样它就可以在所有组件中使用:

import mixin from './mixin'

Vue.mixin(mixin)