前端必知必会-Vue “activated”和“deactivated”生命周期钩子 ...

---

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

正如我们在此页面上看到的，我们有已安装和未安装的生命周期钩子，用于在组件被移除或添加到 DOM 时利用。
已激活和已停用生命周期钩子用于在添加或移除缓存的动态组件（但不从 DOM 中删除）时利用。以下示例中利用 <KeepAlive> 标志来缓存动态组件。
示例
CompOne.vue：

1. <template>
2. <h2>组件</h2>
3. <p>以下是每次运行“已安装”或“已激活”钩子的日志。</p>
4. <ol ref="olEl"></ol>
5. <p>您还可以在控制台中查看这些钩子的运行时间。</p>
6. </template>
8. <script>
9. export default {
10. mounted() {
11. console.log("mounted");
12. const liEl = document.createElement("li");
13. liEl.innerHTML = "已安装";
14. this.$refs.olEl.appendChild(liEl);
15. },
16. activated() {
17. console.log("已激活");
18. const liEl = document.createElement("li");
19. liEl.innerHTML = "已激活";
20. this.$refs.olEl.appendChild(liEl);
21. }
22. }
23. </script>
25. <style>
26. li {
27. background-color: lightcoral;
28. width: 5em;
29. }
30. </style>

复制代码

App.vue:

1. <template>
2. <h1>“activated”生命周期钩子</h1>
3. <p>在此“activated”钩子示例中，我们检查组件是否已使用 <KeepAlive> 正确缓存。</p>
4. <p>如果组件已使用 <KeepAlive> 正确缓存，我们期望“mounted”钩子在第一次包含组件时运行一次（必须在第一次添加到 DOM 中），并且我们期望“activated”钩子在每次包含组件时运行（也是第一次）。</p>
5. <button @click="this.activeComp = !this.activeComp">包含组件</button>
6. <div>
7. <KeepAlive>
8. <comp-one v-if="activeComp"></comp-one>
9. </KeepAlive>
10. </div>
11. </template>
13. <script>
14. export default {
15. data() {
16. return {
17. activeComp: false
18. }
19. }
20. }
21. </script>
23. <style scoped>
24. div {
25. border: dashed black 1px;
26. border-radius: 10px;
27. padding: 20px;
28. margin-top: 10px;
29. background-color: lightgreen;
30. }
31. </style>

复制代码

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

1. <template>
2. <h2>组件</h2>
3. <p>下面是每次运行“activated”、“deactivated”、“mounted”或“unmounted”钩子时的日志。</p>
4. <ol ref="olEl"></ol>
5. <p>您还可以在控制台中查看这些钩子何时运行。</p>
6. </template>
8. <script>
9. export default {
10. mounted() {
11. this.logHook("mounted");
12. },
13. unmounted() {
14. this.logHook("unmounted");
15. },
16. activated() {
17. this.logHook("activated");
18. },
19. deactivated() {
20. this.logHook("deactivated");
21. },
22. methods: {
23. logHook(hookName) {
24. console.log(hookName);
25. const liEl = document.createElement("li");
26. liEl.innerHTML = hookName;
27. this.$refs.olEl.appendChild(liEl);
28. }
29. }
30. }
31. </script>
33. <style>
34. li {
35. background-color: lightcoral;
36. width: 5em;
37. }
38. </style>

复制代码

App.vue:

1. <template>
2. <h1>“activated”和“deactivated”生命周期钩子</h1>
3. <p>在此“activated”和“deactivated”钩子示例中，我们还可以看到“mounted”和“unmounted”钩子何时以及是否运行。</p>
4. <button @click="this.activeComp = !this.activeComp">包含组件</button>
5. <div>
6. <KeepAlive>
7. <comp-one v-if="activeComp"></comp-one>
8. </KeepAlive>
9. </div>
10. </template>
12. <script>
13. export default {
14. data() {
15. return {
16. activeComp: false
17. }
18. }
19. }
20. </script>
22. <style scoped>
23. div {
24.     border: dashed black 1px;
25.     border-radius: 10px;
26.     padding: 20px;
27.     margin-top: 10px;
28.     background-color: lightgreen;
29. }
30. </style>

复制代码

---

总结

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。