我们是否可以在每个组件实例中访问布尔值,以了解何时安装组件?

比如:

<template>
  <div>
    <span v-if="$mounted">I am mounted</span>
    <span v-if="$created">I am created</span>
    <span>Called before created and mounted</span>
  </div>
</template>

推荐答案

UPDATE 2020

Vue有一个未记录的功能.js,您可以知道何时执行组件的生命周期挂钩:Source.

The syntax is as follows:

<ChildComponent @hook:lifecycleHookName="callAMethod" />

Examples:

How to know when a child component is mounted:

<ChildComponent @hook:mounted="componentMountedDoSomething" />

How to know when a child component is created:

<ChildComponent @hook:created="componentCreatedDoSomething" />


<template>
  <div>
    <span v-if="mounted">I am mounted</span>
    <span v-if="created">I am created</span>
    <span>Called before created and mounted</span>
  </div>
</template>

还有 playbook :

export default {
  data: () => ({
    created: false,
    mounted: false
  }),
  created () {
    this.created = true
  },
  mounted() {
    this.mounted = true
  }
}

Vue.js相关问答推荐

如何使用composition api v-model Select 框获取其他JSON 值?

VueJS 中的 VisJS 时间轴:带有图像的项目放错了位置

作为props 传递的原始 ref 的 Vue 3 react 性

JSDoc 单文件 Vue 组件

使用 jquery-chosen 插件更新 vuejs 模型值

即使响应为 200,也会调用 Axios Catch

Bootstrap-vue b-table,标题中带有过滤器

为什么 Vue 路由/Webpack 开发服务器现在在页面刷新时显示无法获取/路径?

使用 aria-live 在 vue.js 中向屏幕阅读器宣布信息

JavaScript/VueJS:判断数组是否包含具有特定值元素的对象

动态注册本地 Vue.js 组件

Vuetify v-btn 路由活动类问题

如何在 Vue.js 应用程序中正确下载 Excel 文件?

中文而不是英文的Element UI分页

从 ajax 调用填充 Vue.js 中的下拉列表

使用 Vue.js 获取所有选中复选框的列表

如何从 Vuex 操作访问 Vuex 状态属性?

在 Chrome DevTools 中实时更改时 destruct 了 Vue.js 应用程序(Webpack 模板)的页面样式

vuejs 中缺少 webpack 配置

在 vue.js 应用程序中将静态内容(例如国家代码)存储在哪里?