系列文章目录

Vue.js基础简答题

文章目录

系列文章目录
前言
一、创建阶段
- 1.beforeCreate
- 2.created
- 3.beforeMount
- 4.mounted
二、运行阶段
- 1.beforeUpdate
- 2.updated
三、销毁阶段
- 1.beforeDestroy
- 2.destroyed
总结

在这里插入图片描述

前言

Vue.js 生命周期指的是Vue实例的生命周期；
Vue实例的生命周期，指的是实例从创建到运行、再到销毁的过程。
通过设置生命周期函数，可以在生命周期的特定阶段执行功能。
生命周期函数也称生命周期钩子。

提示：以下是本篇文章正文内容，下面案例可供参考

一、创建阶段

特点：每个实例只能执行一次。

1.beforeCreate

beforeCreate 是 Vue 实例创建之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用的生命周期钩子函数。在这个阶段，实例的数据观测尚未开始，所以如果需要在此阶段进行数据观测，需要手动触发 $watch。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate: function() {
    this.$watch('message', function(newVal, oldVal) {
      console.log('message changed from', oldVal, 'to', newVal);
    });
  }
});

2.created

created 是 Vue 实例创建完成后被立即调用的生命周期钩子函数。在这个阶段，实例已经完成了数据观测 (data observer),事件配置等工作，因此可以放心地对 DOM 进行操作。通常在这个阶段进行一些初始化操作，如获取数据、设置事件监听等。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  created: function() {
    console.log('Vue instance created');
  }
});

3.beforeMount

beforeMount 是挂载阶段之前被调用的生命周期钩子函数。在这个阶段，模板编译完成，但是还没有将虚拟 DOM 渲染到真实 DOM。这个阶段可以用来执行一些与 DOM 直接相关的操作，如修改 CSS、添加事件监听器等。需要注意的是，如果在这个阶段进行了 DOM 操作，可能会导致性能问题。因此，建议使用 Vue.js 提供的指令和计算属性来处理数据绑定和 DOM 操作。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeMount: function() {
    // 在挂载前修改样式、添加事件监听器等操作
  }
});

4.mounted

mounted 是挂载阶段结束后被调用的生命周期钩子函数。在这个阶段，实例已经成功挂载到 DOM,可以放心地进行 DOM API 访问和其他异步操作。通常在这个阶段进行一些依赖于 DOM 或者网络请求的操作。

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  mounted: function() {
    // 在挂载后修改样式、访问 DOM、发送网络请求等操作
    $.get('https://api.example.com/data').then(function(data) {
      Vue.set(this.$data, 'message', data.message); // 将获取到的数据赋值给 message
    }.bind(this)); // 注意使用 bind(this) 避免上下文丢失的问题
  }
});

二、运行阶段

特点：按需调用。

1.beforeUpdate

beforeUpdate 是数据更新时触发的生命周期钩子函数。在这个阶段，实例的数据仍然保持不变，因此可以放心地进行数据处理和计算属性的更新。如果在这个阶段进行了不必要的操作，可能会导致性能问题。建议使用计算属性来处理数据更新。

new Vue({
  el: '#app',
  data: {
    _message: 'Hello Vue!' // 注意这里使用了下划线作为前缀表示私有变量，避免与外部直接访问冲突
  },
  computed: {
    message: function() { return this._message; } // 将 _message 通过计算属性暴露给模板使用
  },
  beforeUpdate: function() {} // 在数据更新前执行的操作，例如更新计算属性等
});

2.updated

updated 是数据更新后触发的生命周期钩子函数。在这个阶段，实例的数据已经被更新，可以放心地进行 DOM API 访问和其他异步操作。通常在这个阶段进行一些依赖于 DOM 或者网络请求的操作。

new Vue({
  el: '#app',
  data: {
    _message: 'Hello Vue!' // 注意这里使用了下划线作为前缀表示私有变量，避免与外部直接访问冲突
  },
  computed: {
    message: function() { return this._message; } // 将 _message 通过计算属性暴露给模板使用
  },
  methods: {
    fetchData: function() {
      $.get('https://api.example.com/data').then(function(data) {
        Vue.set(this.$data, 'message', data.message); // 将获取到的数据赋值给 message
      }.bind(this)); // 注意使用 bind(this) 避免上下文丢失的问题
    }
  },
  updated: function() {} // 在数据更新后执行的操作，例如调用方法等
});

三、销毁阶段

特点：每个实例只能执行一次。

1.beforeDestroy

beforeDestroy 是组件销毁之前被调用的生命周期钩子函数。在这个阶段，实例仍然可以访问 DOM 和进行 DOM API 操作，但已经被标记为即将卸载。如果需要在组件销毁前进行一些清理操作，可以在这个阶段进行。

new Vue({
  el: '#app',
  data: {},
  methods: {},
  beforeDestroy: function() {
    // 在组件销毁前执行的操作，例如清除定时器、解除事件监听等
  },
  beforeUnmount: function() {} // 在组件卸载前执行的操作，例如移除事件监听器等
});

2.destroyed

destroyed 是组件销毁后被调用的生命周期钩子函数。在这个阶段，实例已经从 DOM 中移除，所有与 DOM 相关的操作都不再有效。通常在这个阶段进行一些资源释放、清除定时器等操作。

new Vue({
  el: '#app',
  data: {},
  methods: {},
  beforeDestroy: function() {
    // 在组件销毁前执行的操作，例如清除定时器、解除事件监听等
  },
  destroyed: function() {} // 在组件销毁后执行的操作，例如关闭弹窗、清除定时器等
});