说说你对Vue生命周期的理解?-Vue面试指南

当前位置:　首页>> 技术小册>> Vue面试指南

Vue生命周期是指Vue实例从创建到销毁的整个过程中，会依次触发的一系列钩子函数。Vue生命周期钩子函数可以帮助我们在合适的时机进行一些操作，例如数据初始化、组件渲染、销毁等。

Vue生命周期可以分为如下三个阶段：

- 创建阶段：包括beforeCreate、created、beforeMount三个钩子函数。

- 运行阶段：包括mounted、updated两个钩子函数。

- 销毁阶段：包括beforeDestroy、destroyed两个钩子函数。

下面是一个简单的Vue生命周期的示例代码：
```
<div id="app">
  <p>{{ message }}</p>
</div>
```
```
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate: function() {
    console.log('beforeCreate');
  },
  created: function() {
    console.log('created');
  },
  beforeMount: function() {
    console.log('beforeMount');
  },
  mounted: function() {
    console.log('mounted');
  },
  updated: function() {
    console.log('updated');
  },
  beforeDestroy: function() {
    console.log('beforeDestroy');
  },
  destroyed: function() {
    console.log('destroyed');
  }
});
```
在这个示例中，定义了一个包含了message属性的Vue实例，并在模板中使用了{{ message }}这个插值语法。同时，定义了各个生命周期钩子函数，并在控制台中输出了各个函数的名称。

在浏览器中运行这个示例代码，可以看到控制台输出了如下结果：
```
beforeCreate
created
beforeMount
mounted
```
这说明Vue实例在挂载过程中依次执行了beforeCreate、created、beforeMount和mounted四个钩子函数。同时，页面上也显示了Hello Vue!这个文本，说明实例已经成功地渲染到了DOM元素上。

接下来，我们对message属性进行修改：
```
app.message = 'Hello World!';
```
在控制台中可以看到输出了updated这个钩子函数的名称，这说明message属性已经被更新并重新渲染到了页面上。

最后，我们手动销毁Vue实例：
```
app.$destroy();
```
在控制台中可以看到输出了beforeDestroy和destroyed这两个钩子函数的名称，这说明Vue实例已经被销毁，相应的数据和事件也被清理掉了。

该分类下的相关小册推荐：

Vue.js从入门到精通(三)

TypeScript和Vue从入门到精通(五)

Vue3技术解密

Vue.js从入门到精通(二)

VUE组件基础与实战

vuejs组件实例与底层原理精讲

Vue.js从入门到精通(四)

Vue源码完全解析

TypeScript和Vue从入门到精通(一)

TypeScript和Vue从入门到精通(二)

移动端开发指南

Vue原理与源码解析