参考手册
Vue 教程
Vue 模板引用
Vue 提供或注入

Vue 生命周期钩子

Vue 中的生命周期钩子是组件生命周期中的某些阶段，我们可以在其中添加代码来完成任务。

生命周期钩子

每当组件在其生命周期中达到一个新阶段时，就会运行一个特定的函数，我们可以向该函数添加代码。这样的函数被称为生命周期钩子，因为我们可以将代码 "钩" 到那个阶段。

以下是组件具有的所有生命周期钩子:

  1. beforeCreate
  2. created
  3. beforeMount
  4. mounted
  5. beforeUpdate
  6. updated
  7. beforeUnmount
  8. unmounted
  9. errorCaptured
  10. renderTracked
  11. renderTriggered
  12. activated
  13. deactivated
  14. serverPrefetch

以下是这些生命周期钩子的实例。

beforeCreate 钩子

beforeCreate 生命周期钩子发生在组件初始化之前，因此这是在 Vue 设置组件的数据、计算属性、方法和事件监听之前。

beforeCreate 钩子可以用于例如设置全局事件监听，但我们应该避免尝试从 beforeCreate 生命周期钩子访问属于组件的元素，例如数据、watcher 和方法，因为它们在这个阶段还没有创建。

此外，尝试从 beforeCreate 生命周期钩子访问 DOM 元素是没有意义的，因为它们是在组件安装之后才创建的。

实例

CompOne.vue:

  1. <template>
  2.     <h2>Component</h2>
  3.     <p>This is the component</p>
  4.     <p id="pResult">{{ text }}</p>
  5. </template>
  7. <script>
  8. export default {
  9.     data() {
  10.         return {
  11.             text: '...'
  12.         }
  13.     },
  14.   beforeCreate() {
  15.         this.text = 'initial text'; // This line has no effect
  16.     console.log("beforeCreate: The component is not created yet.");
  17.   }
  18. }
  19. </script>

App.vue:

  1. <template>
  2.   <h1>The 'beforeCreate' Lifecycle Hook</h1>
  3.   <p>We can see the console.log() message from 'beforeCreate' lifecycle hook, but there is no effect from the text change we try to do to the Vue data property, because the Vue data property is not created yet.</p>
  4.   <button @click="this.activeComp = !this.activeComp">Add/Remove Component</button>
  5.   <div>
  6.     <comp-one v-if="activeComp"></comp-one>
  7.   </div>
  8. </template>
  10. <script>
  11. export default {
  12.   data() {
  13.     return {
  14.       activeComp: false
  15.     }
  16.   }
  17. }
  18. </script>
  20. <style>
  21. #app > div {
  22.   border: dashed black 1px;
  23.   border-radius: 10px;
  24.   padding: 10px;
  25.   margin-top: 10px;
  26.   background-color: lightgreen;
  27. }
  28. #pResult {
  29.   background-color: lightcoral;
  30.   display: inline-block;
  31. }
  32. </style>
运行一下

在上面的例子中，CompOne.vue 中的第 15 行没有效果，因为在这一行中，我们试图更改 vue 数据属性内的文本，但 vue 数据特性实际上还没有创建。另外，请记住打开浏览器控制台，查看第 16 行 console.log() 调用的结果。

created 钩子

created 生命周期钩子发生在组件初始化之后，因此 Vue 已经设置了组件的数据、计算属性、方法和事件监听。

我们应该避免尝试从 created 生命周期钩子访问 DOM 元素，因为在组件安装之前， DOM 元素是不可访问的。

created 生命周期钩子可以用于通过 HTTP 请求获取数据，或者设置初始数据值。与下面的实例一样，数据属性 'text' 被赋予一个初始值：

实例

CompOne.vue:

  1. <template>
  2.     <h2>Component</h2>
  3.     <p>This is the component</p>
  4.     <p id="pResult">{{ text }}</p>
  5. </template>
  7. <script>
  8. export default {
  9.     data() {
  10.         return {
  11.             text: '...'
  12.         }
  13.     },
  14.   created() {
  15.         this.text = 'initial text';
  16.     console.log("created: The component just got created.");
  17.   }
  18. }
  19. </script>

App.vue:

  1. <template>
  2.   <h1>The 'created' Lifecycle Hook</h1>
  3.   <p>We can see the console.log() message from 'created' lifecycle hook, and the text change we try to do to the Vue data property works, because the Vue data property is already created at this stage.</p>
  4.   <button @click="this.activeComp = !this.activeComp">Add/Remove Component</button>
  5.   <div>
  6.     <comp-one v-if="activeComp"></comp-one>
  7.   </div>
  8. </template>
  10. <script>
  11. export default {
  12.   data() {
  13.     return {
  14.       activeComp: false
  15.     }
  16.   }
  17. }
  18. </script>
  20. <style>
  21. #app > div {
  22.   border: dashed black 1px;
  23.   border-radius: 10px;
  24.   padding: 10px;
  25.   margin-top: 10px;
  26.   background-color: lightgreen;
  27. }
  28. #pResult {
  29.   background-color: lightcoral;
  30.   display: inline-block;
  31. }
  32. </style>
运行一下

beforeMount 钩子

beforeMount 生命周期钩子发生在组件挂载之前，也就是在组件添加到 DOM 之前。

我们应该避免尝试从 beforeMount 生命周期钩子访问 DOM 元素，因为在组件安装之前，DOM 元素是不可访问的。

下面的例子表明，我们还不能访问组件中的 DOM 元素，CompOne.vue 中的第 11 行不起作用，并在浏览器控制台中产生错误：

实例

CompOne.vue:

  1. <template>
  2.     <h2>Component</h2>
  3.     <p>This is the component</p>
  4.     <p ref="pEl" id="pEl">We try to access this text from the 'beforeMount' hook.</p>
  5. </template>
  7. <script>
  8. export default {
  9.   beforeMount() {
  10.     console.log("beforeMount: This is just before the component is mounted.");
  11.     this.$refs.pEl.innerHTML = "Hello World!"; // <-- We cannot reach the 'pEl' DOM element at this stage
  12.   }
  13. }
  14. </script>

App.vue:

  1. <template>
  2.   <h1>The 'beforeMount' Lifecycle Hook</h1>
  3.   <p>We can see the console.log() message from the 'beforeMount' lifecycle hook, but the text change we try to do to the 'pEl' paragraph DOM element does not work, because the 'pEl' paragraph DOM element does not exist yet at this stage.</p>
  4.   <button @click="this.activeComp = !this.activeComp">Add/Remove Component</button>
  5.   <div>
  6.     <comp-one v-if="activeComp"></comp-one>
  7.   </div>
  8. </template>
  10. <script>
  11. export default {
  12.   data() {
  13.     return {
  14.       activeComp: false
  15.     }
  16.   }
  17. }
  18. </script>
  20. <style>
  21. #app > div {
  22.   border: dashed black 1px;
  23.   border-radius: 10px;
  24.   padding: 10px;
  25.   margin-top: 10px;
  26.   background-color: lightgreen;
  27. }
  28. #pEl {
  29.   background-color: lightcoral;
  30.   display: inline-block;
  31. }
  32. </style>
运行一下

mounted 钩子

将组件添加到 DOM 树后，立即调用 mounted() 函数，我们可以将代码添加到该阶段。

这是我们第一次有机会做与属于组件的 DOM 元素相关的事情，比如使用 ref 属性和 $refs 对象，就像我们在下面的第二个例子中所做的那样。

实例

CompOne.vue:

  1. <template>
  2.   <h2>Component</h2>
  3.   <p>Right after this component is added to the DOM, the mounted() function is called and we can add code to that mounted() function. In this example, an alert popup box appears after this component is mounted.</p>
  4.   <p><strong>Note:</strong> The reason that the alert is visible before the component is visible is because the alert is called before the browser gets to render the component to the screen.</p>
  5. </template>
  7. <script>
  8. export default {
  9.   mounted() {
  10.     alert("The component is mounted!");
  11.   }
  12. }
  13. </script>

App.vue:

  1. <template>
  2.   <h1>The 'mounted' Lifecycle Hook</h1>
  3.   <button @click="this.activeComp = !this.activeComp">Create component</button>
  4.   <div>
  5.     <comp-one v-if="activeComp"></comp-one>
  6.   </div>
  7. </template>
  9. <script>
  10. export default {
  11.   data() {
  12.     return {
  13.       activeComp: false
  14.     }
  15.   }
  16. }
  17. </script>
  19. <style scoped>
  20.   div {
  21.     border: dashed black 1px;
  22.     border-radius: 10px;
  23.     padding: 20px;
  24.     margin: 10px;
  25.     width: 400px;
  26.     background-color: lightgreen;
  27.   }
  28. </style>
运行一下
注意：mounted 挂载阶段发生在组件添加到 DOM 之后，但在上面的实例中，alert() 在我们看到组件之前是可见的。原因是，首先将组件添加到 DOM 中，但在浏览器将组件渲染到屏幕之前，会出现挂载阶段，alert() 会变为可见，并暂停浏览器渲染组件。
实例

CompOne.vue:

  1. <template>
  2.   <h2>Form Component</h2>
  3.   <p>When this component is added to the DOM tree, the mounted() function is called, and we put the cursor inside the input element.</p>
  4.   <form @submit.prevent>
  5.     <label>
  6.       <p>
  7.         Name: <br>
  8.         <input type="text" ref="inpName">
  9.       </p>
  10.     </label>
  11.     <label>
  12.       <p>
  13.         Age: <br>
  14.         <input type="number">
  15.       </p>
  16.     </label>
  17.     <button>Submit</button>
  18.   </form>
  19.   <p>(This form does not work, it is only here to show the mounted lifecycle hook.)</p>
  20. </template>
  22. <script>
  23.   export default {
  24.     mounted() {
  25.       this.$refs.inpName.focus();
  26.     }
  27.   }
  28. </script>
运行一下

beforeUpdate 钩子

每当组件的数据发生更改时，都会调用 beforeUpdate 生命周期钩子，但在更新呈现到屏幕之前。beforeUpdate 生命周期钩子发生在更新的生命周期挂钩之前。

beforeUpdate 钩子的特殊之处在于，我们可以在不触发新更新的情况下对应用程序进行更改，从而避免了原本无限的循环。这就是在更新的生命周期钩子中不更改应用程序的原因，因为有了这个钩子，将创建一个无限循环。看看下面的第三个例子，红色。

实例

函数 beforeUpdate() 在文档中添加一个 <li> 标记，表示函数 beforeUpdate() 已经运行。

CompOne.vue:

  1. <template>
  2.   <h2>Component</h2>
  3.   <p>This is the component</p>
  4. </template>

App.vue:

  1. <template>
  2.   <h1>The 'beforeUpdate' Lifecycle Hook</h1>
  3.   <p>Whenever there is a change in our page, the application is 'updated' and the 'beforeUpdate' hook happens just before that.</p>
  4.   <p>It is safe to modify our page in the 'beforeUpdate' hook like we do here, but if we modify our page in the 'updated' hook, we will generate an infinite loop.</p>
  5.   <button @click="this.activeComp = !this.activeComp">Add/Remove Component</button>
  6.   <div>
  7.     <comp-one v-if="activeComp"></comp-one>
  8.   </div>
  9.   <ol ref="divLog"></ol>
  10. </template>
  12. <script>
  13. export default {
  14.   data() {
  15.     return {
  16.       activeComp: true
  17.     }
  18.   },
  19.   beforeUpdate() {
  20.     this.$refs.divLog.innerHTML += "<li>beforeUpdate: This happened just before the 'updated' hook.</li>";
  21.   }
  22. }
  23. </script>
  25. <style>
  26. #app > div {
  27.   border: dashed black 1px;
  28.   border-radius: 10px;
  29.   padding: 10px;
  30.   margin-top: 10px;
  31.   background-color: lightgreen;
  32. }
  33. </style>
运行一下

updated 钩子

updated 更新的生命周期钩子是在组件更新了 DOM 树之后调用的。

实例

updated() 函数使用 console.log() 编写消息。每当页面更新时就会发生这种情况，在本例中，每次添加或删除组件时都会发生这种情况。

CompOne.vue:

  1. <template>
  2.   <h2>Component</h2>
  3.   <p>This is the component</p>
  4. </template>

App.vue:

  1. <template>
  2.   <h1>The 'updated' Lifecycle Hook</h1>
  3.   <p>Whenever there is a change in our page, the application is updated and the updated() function is called. In this example we use console.log() in the updated() function that runs when our application is updated.</p>
  4.   <button @click="this.activeComp = !this.activeComp">Add/Remove Component</button>
  5.   <div>
  6.     <comp-one v-if="activeComp"></comp-one>
  7.   </div>
  8. </template>
  10. <script>
  11. export default {
  12.   data() {
  13.     return {
  14.       activeComp: true
  15.     }
  16.   },
  17.   updated() {
  18.     console.log("The component is updated!");
  19.   }
  20. }
  21. </script>
  23. <style>
  24. #app {
  25.   max-width: 450px;
  26. }
  27. #app > div {
  28.   border: dashed black 1px;
  29.   border-radius: 10px;
  30.   padding: 10px;
  31.   margin-top: 10px;
  32.   width: 80%;
  33.   background-color: lightgreen;
  34. }
  35. </style>
运行一下

点击 "Add/Remove Component" 按钮 10 次后，我们可以在浏览器控制台中看到结果：

注意：当调用更新的生命周期挂钩时，我们必须小心不要修改页面本身，因为这样页面就会一次又一次地更新，从而创建一个无限循环。

beforeUnmount 钩子

The beforeUnmount 就在从 DOM 中移除组件之前调用生命周期钩子。

正如我们在下面的例子中看到的，我们仍然可以在 beforeUnmount 钩子中访问 DOM 中的组件元素。

实例

CompOne.vue:

  1. <template>
  2.   <h2>Component</h2>
  3.   <p ref="pEl">Strawberries!</p>
  4. </template>
  6. <script>
  7. export default {
  8.   beforeUnmount() {
  9.     alert("beforeUnmount: The text inside the p-tag is: " + this.$refs.pEl.innerHTML);
  10.   }
  11. }
  12. </script>

App.vue:

  1. <template>
  2.   <h1>Lifecycle Hooks</h1>
  3.   <button @click="this.activeComp = !this.activeComp">{{ btnText }}</button>
  4.   <div>
  5.     <comp-one v-if="activeComp"></comp-one>
  6.   </div>
  7. </template>
  9. <script>
  10. export default {
  11.   data() {
  12.     return {
  13.       activeComp: true
  14.     }
  15.   },
  16.   computed: {
  17.     btnText() {
  18.       if(this.activeComp) {
  19.         return 'Remove component'
  20.       }
  21.       else {
  22.         return 'Add component'
  23.       }
  24.     }
  25.   }
  26. }
  27. </script>
  29. <style scoped>
  30.   div {
  31.     border: dashed black 1px;
  32.     border-radius: 10px;
  33.     padding: 20px;
  34.     margin: 10px;
  35.     width: 400px;
  36.     background-color: lightgreen;
  37.   }
  38. </style>
运行一下

unmounted 钩子

unmounted 从 DOM 中移除组件后，将调用生命周期钩子。

例如，此挂钩可用于删除事件监听或取消计时器或间隔。当组件被卸载时，会调用 unmounted() 函数，我们可以向其中添加代码：

实例

CompOne.vue:

  1. <template>
  2.   <h2>Component</h2>
  3.   <p>When this component is removed from the DOM tree, the unmounted() function is called and we can add code to that function. In this example we create an alert popup box when this component is removed.</p>
  4. </template>
  6. <script>
  7. export default {
  8.   unmounted() {
  9.     alert("The component is removed (unmounted)!");
  10.   }
  11. }
  12. </script>

App.vue:

  1. <template>
  2.   <h1>Lifecycle Hooks</h1>
  3.   <button @click="this.activeComp = !this.activeComp">{{ btnText }}</button>
  4.   <div>
  5.     <comp-one v-if="activeComp"></comp-one>
  6.   </div>
  7. </template>
  9. <script>
  10. export default {
  11.   data() {
  12.     return {
  13.       activeComp: true
  14.     }
  15.   },
  16.   computed: {
  17.     btnText() {
  18.       if(this.activeComp) {
  19.         return 'Remove component'
  20.       }
  21.       else {
  22.         return 'Add component'
  23.       }
  24.     }
  25.   }
  26. }
  27. </script>
  29. <style scoped>
  30.   div {
  31.     border: dashed black 1px;
  32.     border-radius: 10px;
  33.     padding: 20px;
  34.     margin: 10px;
  35.     width: 400px;
  36.     background-color: lightgreen;
  37.   }
  38. </style>
运行一下
注意：unmounted 卸载阶段发生在从 DOM 中移除组件之后，但在上面的实例中，alert() 在组件消失之前可见。原因是，首先从 DOM 中删除组件，但在浏览器将组件的删除呈现到屏幕之前，会出现 unmounted 卸载阶段，alert() 会变为可见，并暂停浏览器从可见位置删除组件。

errorCaptured 钩子

errorCaptured 生命周期挂钩是在 子/后代 组件中发生错误时调用的。

这个钩子可以用于错误处理、日志记录或向用户显示错误。

实例

CompOne.vue:

  1. <template>
  2.   <h2>Component</h2>
  3.   <p>This is the component</p>
  4.   <button @click="generateError">Generate Error</button>
  5. </template>
  7. <script>
  8. export default {
  9.   methods: {
  10.     generateError() {
  11.       this.$refs.objEl.innerHTML = "hi";
  12.     }
  13.   }
  14. }
  15. </script>

App.vue:

  1. <template>
  2.   <h1>The 'errorCaptured' Lifecycle Hook</h1>
  3.   <p>Whenever there is an error in a child component, the errorCaptured() function is called on the parent.</p>
  4.   <p>When the button inside the component is clicked, a method will run that tries to do changes to a $refs object that does not exist. This creates an error in the component that triggers the 'errorCaptured' lifecycle hook in the parent, and an alert box is displayed with information about the error.</p>
  5.   <p>After clicking "Ok" in the alert box you can see the error in the browser console.</p>
  6.   <div>
  7.     <comp-one></comp-one>
  8.   </div>
  9. </template>
  11. <script>
  12. export default {
  13.   errorCaptured() {
  14.     alert("An error occurred");
  15.   }
  16. }
  17. </script>
  19. <style>
  20. #app > div {
  21.   border: dashed black 1px;
  22.   border-radius: 10px;
  23.   padding: 10px;
  24.   margin-top: 10px;
  25.   background-color: lightgreen;
  26. }
  27. </style>
运行一下

有关错误的信息也可以作为 errorCaptured() 函数的参数捕获，这些参数包括：

  • 错误
  • 触发错误的组件
  • 错误源类型

在下面的实例中，这些参数在 errorCaptured() 函数中捕获并写入控制台：

实例

CompOne.vue:

  1. <template>
  2.   <h2>Component</h2>
  3.   <p>This is the component</p>
  4.   <button @click="generateError">Generate Error</button>
  5. </template>
  7. <script>
  8. export default {
  9.   methods: {
  10.     generateError() {
  11.       this.$refs.objEl.innerHTML = "hi";
  12.     }
  13.   }
  14. }
  15. </script>

App.vue:

  1. <template>
  2.   <h1>The 'errorCaptured' Lifecycle Hook</h1>
  3.   <p>Whenever there is an error in a child component, the errorCaptured() function is called on the parent.</p>
  4.   <p>Open the browser console to see the captured error details.</p>
  5.   <div>
  6.     <comp-one></comp-one>
  7.   </div>
  8. </template>
  10. <script>
  11. export default {
  12.   errorCaptured(error,compInst,errorInfo) {
  13.     console.log("error: ", error);
  14.     console.log("compInst: ", compInst);
  15.     console.log("errorInfo: ", errorInfo);
  16.   }
  17. }
  18. </script>
  20. <style>
  21. #app > div {
  22.   border: dashed black 1px;
  23.   border-radius: 10px;
  24.   padding: 10px;
  25.   margin-top: 10px;
  26.   background-color: lightgreen;
  27. }
  28. </style>
运行一下

renderTracked 和 renderTriggered 生命周期钩子

renderTracked 钩子在渲染函数设置为跟踪或监视响应式组件时运行。renderTracked 钩子通常在初始化响应式组件时运行。

renderTriggered 钩子在跟踪的响应式组件发生更改时运行，因此会触发新的渲染，从而使用最新的更改更新屏幕。

响应式组件是一种可以改变的组件。

render 函数是 Vue 编译的一个函数，用于跟踪响应式组件。当响应式组件发生变化时，会触发渲染功能，并将应用程序重新渲染到屏幕上。

renderTracked 和 renderTriggered 钩子用于调试，仅在开发模式下可用。

要从 renderTracked 和 renderTriggered 钩子中查看 alert() 和 console.log()，您必须将下面示例中的代码复制到您的计算机上，并在开发模式下运行应用程序。

实例

CompOne.vue:

  1. <template>
  2.   <h2>Component One</h2>
  3.   <p>This is a component.</p>
  4.   <button @click="counter++">Add One</button>
  5.   <p>{{ counter }}</p>
  6. </template>
  8. <script>
  9. export default {
  10.   data() {
  11.     return {
  12.       counter: 0
  13.     }
  14.   },
  15.   renderTracked(evt) {
  16.     console.log("renderTracked: ",evt);
  17.     alert("renderTracked");
  18.   },
  19.   renderTriggered(evt) {
  20.     console.log("renderTriggered: ",evt)
  21.     alert("renderTriggered");
  22.   }
  23. }
  24. </script>

App.vue:

  1. <template>
  2.   <h1>The 'renderTracked' and 'renderTriggered' Lifecycle Hooks</h1>
  3.   <p>The 'renderTracked' and 'renderTriggered' lifecycle hooks are used for debugging.</p>
  4.   <p><mark>This example only works in development mode, so to see the hooks run, you must copy this code and run it on you own computer in development mode.</mark></p>
  5.   <div>
  6.     <comp-one></comp-one>
  7.   </div>
  8. </template>
  10. <style scoped>
  11.   div {
  12.     border: dashed black 1px;
  13.     border-radius: 10px;
  14.     padding: 20px;
  15.     margin-top: 10px;
  16.     background-color: lightgreen;
  17.   }
  18. </style>
运行一下
注意：上面实例中的代码旨在以开发模式在您的计算机上本地复制和运行，因为 renderTracked 和 renderTriggered 钩子仅在开发模式下工作。

activated 和 deactivated 生命周期钩子

正如我们在本页上面看到的，当组件被移除或添加到 DOM 时，我们有 activated 和 deactivated 的生命周期钩子。

activated 和 deactivated 的生命周期钩子用于添加或移除缓存的动态组件，而不是从 DOM 中移除。下面的实例中使用了 <KeepAlive> 标记来缓存动态组件。

实例

CompOne.vue:

  1. <template>
  2.   <h2>Component</h2>
  3.   <p>Below is a log with every time the 'mounted' or 'activated' hooks run.</p>
  4.   <ol ref="olEl"></ol>
  5.   <p>You can also see when these hooks run in the console.</p>
  6. </template>
  8. <script>
  9. export default {
  10.   mounted() {
  11.     console.log("mounted");
  12.     const liEl = document.createElement("li");
  13.     liEl.innerHTML = "mounted";
  14.     this.$refs.olEl.appendChild(liEl);
  15.   },
  16.   activated() {
  17.     console.log("activated");
  18.     const liEl = document.createElement("li");
  19.     liEl.innerHTML = "activated";
  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>The 'activated' Lifecycle Hook</h1>
  3.   <p>In this example for the 'activated' hook we check if the component is cached properly with <KeepAlive>.</p>
  4.   <p>If the component is cached properly with <KeepAlive> we expect the 'mounted' hook to run once the first time the component is included (must be added to the DOM the first time), and we expect the 'activated' hook to run every time the component is included (also the first time).</p>
  5.   <button @click="this.activeComp = !this.activeComp">Include component</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>Component</h2>
  3.   <p>Below is a log with every time the 'activated', 'deactivated', 'mounted' or 'unmounted' hooks run.</p>
  4.   <ol ref="olEl"></ol>
  5.   <p>You can also see when these hooks run in the console.</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>The 'activated' and 'deactivated' Lifecycle Hooks</h1>
  3.   <p>In this example for the 'activated' and 'deactivated' hooks we also see when and if the 'mounted' and 'unmounted' hooks are run.</p>
  4.   <button @click="this.activeComp = !this.activeComp">Include component</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>
运行一下

serverPrefetch 生命周期钩子

'serverPrefetch' 钩子仅在服务器端呈现（SSR）期间调用。

解释和创建 'serverPrefetch' 钩子的示例需要相对较长的介绍和设置，这超出了本教程的范围。

Vue 模板引用
Vue 提供或注入

分类导航

C 语言C++C#JavaPHPPYTHONGONode.jsPandasR 语言DjangoMatplotlibVB 教程ABAP 教程Fiori 教程汇编语言.NET Core 教程ASP.NET Core 教程Vue 教程Numpy机器学习SciPy