文章目录

• Vue “activated”和“deactivated”生命周期钩子
• 总结

  ---

  Vue “activated”和“deactivated”生命周期钩子

  正如我们在此页面上看到的，我们有已安装和未安装的生命周期钩子，用于在组件被移除或添加到 DOM 时使用。

  已激活和已停用生命周期钩子用于在添加或移除缓存的动态组件（但不从 DOM 中删除）时使用。以下示例中使用 标记来缓存动态组件。

  示例

  CompOne.vue：

  组件
  以下是每次运行“已安装”或“已激活”钩子的日志。
  您还可以在控制台中查看这些钩子的运行时间。
  
  
  export default {
  mounted() {
  console.log("mounted");
  const liEl = document.createElement("li");
  liEl.innerHTML = "已安装";
  this.$refs.olEl.appendChild(liEl);
  },
  activated() {
  console.log("已激活");
  const liEl = document.createElement("li");
  liEl.innerHTML = "已激活";
  this.$refs.olEl.appendChild(liEl);
  }
  }
  
  
  li {
  background-color: lightcoral;
  width: 5em;
  }
  
  

  App.vue:

  “activated”生命周期钩子
  在此“activated”钩子示例中，我们检查组件是否已使用  正确缓存。
  如果组件已使用  正确缓存，我们期望“mounted”钩子在第一次包含组件时运行一次（必须在第一次添加到 DOM 中），并且我们期望“activated”钩子在每次包含组件时运行（也是第一次）。
  包含组件
  
  
  
  
  
  
  
  export default {
  data() {
  return {
  activeComp: false
  }
  }
  }
  
  
  div {
  border: dashed black 1px;
  border-radius: 10px;
  padding: 20px;
  margin-top: 10px;
  background-color: lightgreen;
  }
  
  

  让我们扩展上面的示例，看看 activated 和 deactivated 钩子是如何工作的。我们还可以使用 mounted 和 unmounted 钩子，这样我们就可以看到 mounted 钩子在第一次添加缓存组件时运行一次，而 unmounted 钩子永远不会为缓存组件运行。

  示例

  CompOne.vue：

  组件
  下面是每次运行“activated”、“deactivated”、“mounted”或“unmounted”钩子时的日志。
  您还可以在控制台中查看这些钩子何时运行。
  
  
  export default {
  mounted() {
  this.logHook("mounted");
  },
  unmounted() {
  this.logHook("unmounted");
  },
  activated() {
  this.logHook("activated");
  },
  deactivated() {
  this.logHook("deactivated");
  },
  methods: {
  logHook(hookName) {
  console.log(hookName);
  const liEl = document.createElement("li");
  liEl.innerHTML = hookName;
  this.$refs.olEl.appendChild(liEl);
  }
  }
  }
  
  
  li {
  background-color: lightcoral;
  width: 5em;
  }
  
  

  App.vue:

  
  （图片来源网络，侵删）

  “activated”和“deactivated”生命周期钩子
  在此“activated”和“deactivated”钩子示例中，我们还可以看到“mounted”和“unmounted”钩子何时以及是否运行。
  包含组件
  
  
  
  
  
  
  
  export default {
  data() {
  return {
  activeComp: false
  }
  }
  }
  
  
  div {
      border: dashed black 1px;
      border-radius: 10px;
      padding: 20px;
      margin-top: 10px;
      background-color: lightgreen;
  }
  
  

  ---

  总结

  本文介绍了Vue “activated”和“deactivated”生命周期钩子的使用，如有问题欢迎私信和评论

  
  （图片来源网络，侵删）
  
  （图片来源网络，侵删）